Hi I'm using Ionic and I'm trying to build an app, and everything seems to be right when I go through my code but when I go to ionic serve, all I see is a blank screen. Does anybody know how to find an error, at least I mean I have gone through the code multiple times and can't find anything that would be breaking my app. Any advice would be helpful.
When using $ ionic serve, you can use the built-in web inspector from your browser. In most browsers, you can activate this by right-clicking on your webpage and click on inspect element.
If you're using Google Chrome for example, this is named the Chrome DevTools. If you 'inspect element' and click on the console tab, you will see errorlogs if there are any.
Related
I am not able to enable javascript in Chrome. Under Chrome javascript setting the default option for "sites can use javascript" is grayed out. Even if I add website manually under "Allowed to use javascript" the website is not loading, screenshot below.
This happened while I was trying to find a solution for another issue and followed solution from this page (the top answer), so I went to Chrome Devtools > Sources and clicked on the pause button since then the javascript has got disabled. Paused in debugger in chrome?
Note: Javascript is working fine in other Chrome Profiles. The issue is with this particular Chrome Profile.
Try right-clicking the "Sites can use Javascript" option, and inspect element:
Then, remove the disabled or disabled="" attribute from whatever element the console brings you to.
The option should be enabled. Click it and try reloading your site again.
If this doesn't work, you can try reporting any problems for whatever chrome has (I use Mozilla Firefox and I know they have a help center).
Or try re-installing the browser, because some files may be corrupt (don't worry, if you have an account you can sign-in after the reinstallation and everything should be synced).
We have a Kiosk App (written in React) and it is working on ~800 devices. All of the devices are Windows devices and for some of them (about 5%), when a user without tech literacy uses more than one finger (lets say he tries to input his customer number but with using three fingers instead of one) the app crashes after a point (Google Chrome is not responding error).
I do not know why, but when I tried to debug the app on live environment using localhost:9222 as my Chrome DevTools output, I could raise some errors while scrolling and clicking the app, but I cannot create the user input remotely, because I am using a mouse, not a touch screen. And I cannot debug on the devices.
Does anybody have an idea on what is wrong? And how can I stop the crashes?
What I tried to do so far;
Tried to enable Crash Logs, couldn't make it log to a file so I can inspect it, nothing gets logged
Tried to create a chrome console log file, but nothing is shown here too
Tried to change screen input type from touch to mouse click, didn't fix it
Tried to use Chrome Command Line Switches such as disable-pinch and enable-crash-reporter but none of them seem to give me any info or fix the problem
Any tips?
I am a new web developer and just started working. i am doing debugging and fixing errors now. so the website is so huge and i have access to the whole code. if i get an issue saying fix heading "my heading" to "my own heading", its easy to locate where the code is by doing a search on the code editor like visual code, but how do i know where exactly is that "my heading" is on the website. i tried development tool, it is limited due to alot of code is traspiled so code on editor and development tool is not the same. is there a solution ? it is killing alot of time, asking co workers all the time seems not right either .
to fix errors of html you can use this web site: https://validator.w3.org/
Have you try to use "Console" direct from the browser? if you use chrome, you can run the code inspector by doing right click on the webpage and there you can search for specific line of code, tag, and so on, or modify right there on the inspector the java code and run it to see if its working properly.
Hope it helps, regards.
UPDATE #2
So we found out how to debug our application utilizing the safari debugger. For those of you interested, here's the link on how to do this:
http://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
Using this, we figured out that our issue was actually related to CSS that we were using in our code. In our body class, we had the attribute "overflow-y: auto". Upon deletion of this line of code, everything worked again in mobile safari.
~~~~~~~~~~~~~~~~
UPDATE: Upon further testing. It looks like if I go to the web version of this application (hosted on our server) from the safari app on our iPad, this bug still happens. If I do the same on the mac version of safari though, then this bug does NOT happen. Hopefully this information might be helpful.
~~~~~~~~~~~~~~~~
So we have a javascript hybrid application that's compiled using the trigger.io toolkit. Jquery, backbone.js, and marionette.js are use in this project. We just started testing on iOS devices.
Everything works fine on both the web / android versions of this app, but on iOS (both simulator and device), the following bug is occurring:
Upon loading up the application, on the first view, when you first tap into a text field the application freezes briefly. After the application unfreezes, the following error code is output into the trigger.io console:
_BSMachError: (os/kern) invalid capability (20)
_BSMachError: (os/kern) invalid name (15)
Everything looks fine, but then if you type more than one letter into the textfield, the entire application disappears except for the background view. You can tap out of the text field, and everything returns into view, but obviously this is something customers shouldn't be experiencing.
I've researched a bit, and some suggestions have said to try and edit the info.plist file. I've looked everywhere, but I can't seem to find this file. It's seeming like trigger.io hides this from the developer somehow.
Does anybody have any ideas as to what might be causing this issue or how to fix it?
Thanks!
So we found out how to debug our application utilizing the safari debugger. For those of you interested, here's the link on how to do this:
http://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
Using this, we figured out that our issue was actually related to CSS that we were using in our code. In our body class, we had the attribute "overflow-y: auto". Upon deletion of this line of code, everything worked again in mobile safari.
I have went through this link https://confluence.jetbrains.com/display/WI/Live+Edit as well as this question thread Webstorm LiveEdit for chrome not working and I still cannot get my Webstorm live edit to work.
I have the live edit plugin enabled, the auto reload setting on (300ms) and the jetbrains chrome extension installed. When I activate debug mode the project opens up fine in the browser but the page does not actively reload when I adjust the content or save the file. One thing I have noticed (and the above links recommend) is to make sure that Live Edit is clicked in the view menu dropdown but I do not have that option in regular run or debug mode.
Any idea how I can get this to work properly? If you need more information to solve this issue please let me know.
I also have the same problem but one alternative if you need live edit is:
Try right click on the html file (suppose index.html) and then choose the option debug index.html. Then this will generate an option at the top. So every time you click on the bug icon it will open Chrome and every change that you make on index.html will appear immediately on Chrome.
Also if you select some code in WebStorm it will appear in yellow on Chrome.
I ran into the same problem today. I'm utilizing WebStorm 2016.2.2. In addition the extension for chrome did want to connect. The following steps solved my issue:
Verify that your configuration in your IDE matched with the extension in your browser.
Copy the URL path up to 63342. Now lets go to the browser. Right click the JB extension icon.
Make sure that your extension set up matches IDE configuration like so.
Hope this helps for newer versions of WS!!!