I'm trying to debug a CMS-backed website (Drupal 7). It is displaying some problems due to conflicting Javascript. For a fraction of a second, the site components are fine, and then *SNAP*, they're broken. It must brake as soon as the conflicting resource loads.
Using Chrome's developer tools (or Safari, Firefox... even IE's), is there a way to load the page, one Javascript resource at a time? This way I can see exactly which resource loads when the page issues appear.
(I'm also open to better ways of debugging this kind of thing.)
You can use the Pause on exceptions feature of DevTools, in Sources Tab, it is the hexagonal pause button at the far right.
Related
We have a large old web application organized with iframes (many), every iframe is a html page (to be more specific asp.net webform, but the problem is on client side).
We have a problem with some javascript but we don't know which script and in which page.
When the user navigate to a specific section of the web application, the application freeze. Browsers generally alert the user that there is a script with long execution, and suggest to quit the script.
We can't find where is the problem. Is there some feature in modern browser to step directly in developer tools of the browser, in debug mode on the script who has the problem (instead of simply quit the script) when we face the problem, or some other workaround to detect the script?
The comments on my answer helped for a very simple solution I didn't thinked before... Keeping the debugger running I noted on debugger toolbar (IE, but suppose every browsers work the same) the buttons "pause" (2 vertical red sticks) and "continue" (green triangle). Pressing pause the debugger stop on the exact line the script is running in that moment...
Okay, here's my problem. I wrote some JavaScript for a page, for some reason the page doesn't work in Chrome. The site does what I expect in Opera, Chromium and Firefox. In the Choom devtools there is a kind of error showing in the source tab showing "JavScript is disabled" in a mouse hover popup:
I turned off all chrome's extensions, Javascript in on in the content settings and I cleared all JavaScript exceptions I had, but this didn't seem to change anything. The weird thing (an other one) is that some other sites give the same alert icon in the devtools (including this one) but JavaScript works just fine.
If you perform the exact same functions in the console then, some of, the functions perform just fine.
Does anyone have an idea what I could be because I am out of idea's and it is really annoying that I have to switch browser to test the page (page is 'live' here). Thanks
Have you checked the DevTools settings? You might have accidentally enabled "Disable Javascript"
If I'm doing Facebook application development I often find myself wanting run JavaScript in the iframe where my page is embedded, which is fairly cumbersome. It would also be nice (though my main priority is just being to on the fly run some javascript) if there was a way to run something similar to the chrome dev tools or firebug specifically on that one frame.
Do I have any options for debugging in a single frame?
In Firebug it's possible by using the cd() function. E.g.: cd(window.parent.frames[1])
I ended up embedding Firebug lite inside of the iframe for superusers, which I think I should be doing in the first place so our designer can get some feedback on the iPad and things.
I also noticed that there is a dropdown (or I guess drop-up in this case) menu in the chrome-dev channel for specifying which frame you are working in, similar to the cd() command styrr mentioned.
Is there a way to modify JavaScript code while debugging? Visual Studio has "Edit and Continue", and similar hot swapping of code can be done in Java and other languages. Can this be done with JavaScript, and if so, how?
Chrome, Safari, and some other WebKit-based browsers contain a feature in the Web Inspector known as Live Edit. If you go to the Scripts panel and are stopped on a breakpoint (or maybe even if not stopped on a breakpoint — I'm not sure), you can double click on a line and start editing that line. The changes you make will take effect on the script.
With Chrome Developer tools, this is super easy.
Just pop open inspector, click on the scripts tab, select which one you want from the dropdown menu and then you are free to edit the script and add in breakpoints. If you refresh the page, your breakpoints will stay there.
If you watch this talk but Paul Irish, he shows how you can edit a script on the fly
http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/
also good:
http://blip.tv/jsconf/jsconf2011-paul-irish-5382827
If you're talking about while debugging, it's very easy to modify the running code. In your debugging console, you can enter in Javascript expressions and it will run in the context of the window, which contains all the objects and functions of your code, so you can swap them out by redefining them.
Because JavaScript can modify the DOM the you essentially have to change the JavaScript file, save it and reload. For me, I like IE so I run the webpage in a browser NOT IN DEBUG mode. Then you can change the script files, SAVE them. switch back to the browser and reload (F5) to see your changes. Supposedly IE 11 has this ability (probably like Chrome which is essentially what I am doing, changing saving reloading from what I can tell) but I can't get it to find, let alone open a js file. Super poor UI. I'm guessing the browser to open the file icon is but it is always grayed out.
I have a Javascript image switcher on my products page. It working perfect in IE and Firefox but both Safari and Chrome fails to load the script on some pageloads. A refresh seems to fix it but when changing product page or language it crashes.
The product page
Im using Wordpress and the script is varal.org/media/imageswitcher/
Thanks!
Anton
I did not experience any issues in either Chrome or Safari for Windows on your product page. Try this in Chrome, to check if the two scripts (imageswitcherconf.js and imageswitcher.js) are being loaded:
Press Ctrl+Shift+J to open the JavaScript Console/Developer Tools window.
Click the Resources tab on the top of the window.
Enable resource tracking/script debugging if you have to.
With the JavaScript Console/Developer Tools window still open, perform an operation that would normally trigger a crash, such as switching languages.
On the left side of the window, under the Resources heading, you should see imageswitcherconf.js followed by imageswitcher.js. (For me, they appeared fourth and fifth in the list, respectively.)
If the files aren't being loaded:
Are you behind a caching proxy?
Is your browser cache clear?