Debugging JavaScript in IE11 - javascript

The F12 tools look good, and I see controls for most of what I would like to use (Continue, Step In, Step Out). But the HTML app I want to debug runs before I can start the F12 tools. What I need is a Restart button, it would seem to me.
Am I missing seeing this, or am I out of luck?
By the way, I see the same problem in Chrome.

Open your Page.
Press F12 to display the tools.
Switch to the debugging tab.
Add your breakpoints.
Refresh by pressing F5 or Ctrl+F5 orCtrl+R.

Related

Chrome Dev Tools stops at breakpoint even when breakpoints are deactivated

I encountered an issue while debugging Javascript in the Dev Tools in Chrome.
Even when I have deactivated the breakpoints from the button, it still stops at them.
like this
I haven't enabled the "Pause on exceptions" button and the only thing that works is when I disable the breakpoints one by one (not having 'tick' on them).
disabled breakpoint
I noticed that this appeared in a week or so.
My browser is Version 78.0.3904.108 (Official Build) (64-bit)
It happened to me when I had another browser tab open on the same domain and the dev tool was open in that other tab too.
in that case you need to decative the debugger in both tabs or better close the other tab.
Edit: The issue is gone now, with the last update from chrome.

How to remove breakpoints causing Chrome to hang

Is it possible to delete all breakpoints without opening Chrome devtools?
I have a breakpoint set in a large obfuscated javascript file that cause the current tab to hang if I have devtools open while the page loads. I have no problems if i let the page load, and then open the devtools, but then the script is not visible in the sources and network panels.
I have attempted to disable breakpoints by immediately activating the "Deactivate all breakpoints" button when the page loads, but the breakpoint still triggers causing the tab to hang.
Update: This problem only happens when the sources panel in the devtools is open during page load.
As #Andrey points out, when the dev tools are closed Chrome will never break on a breakpoint.
You can disable breakpoints using Ctrl + F8, hitting F8 afterwards will continue from the current breakpoint.
You can also view a summary of all active BP's in the right of dev tools.
Update:
A last resort option is to clear the dev tools settings as follows. Note this will clear reset any customized settings you have...
Settings > Restore defaults and reload
I finally managed to reset the devtools, including all breakpoints, by simply logging out of chrome and back in again.

How does Internet Explorer Developer Tools refresh the DOM?

I have an unusual problem that IE F12 Dev Tools seems to be able to workaround. When my javascript is inserted into a page which contains a frameset with multiple frames, the src tag for one of the frames does not get updated and so the document it contains is not navigated and the frame contains the wrong page.
My javascript is not public domain so i can't post it here but when i fired up F12 Dev Tools to take a look and did Select Element i found that the page had somehow been refreshed and was now working. Hitting F5 or refresh on the browser does not get it working.
It seems a long shot that someone could tell me exactly how F12 refreshes the DOM. Maybe someone can tell me how i could add code (event logger?) to the page find out what is happening to it when F12 Dev Tools starts operating on it?

Is it possible to see chrome console while being in source debugger?

I want to debug javascript and see a console at the same time (something like having two separate windows). I can not find a way to do this: either a debugger or a console.
Yes. There is an button that looks like >= in the top right of the developer tools
When you click on that it opens a drawer that allows you to run console commands
Update for 2017
The icon has been removed and is now available through the dropdown menu (which also helpfully shows the keyboard shortcut: Esc)
Press escape while in the debugger to open the console.
You may also open up the console to experiment while paused. Hit the [Esc] key to bring the console into view.

IE11's F12 developer tools lack option to keep console on navigation

Trying to debug a problem that's IE-11 specific, I would like to see the console messages logged when a certain control is clicked. But the control refreshes the page, which makes F12 tools automatically clear the console, so whatever is logged just before that, I don't get to see!
Past versions of IE had an option to keep the console contents on navigation. Is this option available in IE11? If so, where is it? If not, is there some other way to view the console that doesn't immediately discard the message I want to see?
In with the latest F12 update to IE11 (that came as part of the Win8.1 Update) there is now a button to disable "Clear on Navigate"
Additionally, you can enable IE to record messages in the Console at all times instead of only when the Console is open.
For all the changes to the IE11 F12 dev tools see: http://support.microsoft.com/kb/2929437
Ran into this and I didn't find a good solution, but I found a hacked one that worked well enough for me to debug.
Use window.onbeforeunload to pop up a window so you can at least see the values before they are purged.
See: Prompting and preventing user from navigating away/closing a page

Categories

Resources