I am trying to in inspect element for a webpage https://supremenewyork.com, every time I try to inspect element the site crashes and I get a debugger paused exception in any browser I try, why is this?
They have the keyword debugger as debugger; somewhere in their code that gets executed through a condition whenever the web page is inspected, which has the same functionality as setting a breakpoint in the debugger, but you can easily click Deactivate breakpoints then click Resume script execution which should bypass that.
Related
I would like to start debugging javascript before the load event at each time each part of the javascript is obtained from the server.
I know that chrome can debug event triggered by the load page event.
But if I'm not wrong during the loading of the page, the obtained javascript from the browser is executed before the load page event. (and some part can be executed again latter if they are saved in load page event)
Is it possible and how to do so?
For this you can write 'debugger' in your Javascript code and then open debugger in chrome and refresh page, now your page will stop on debugger and you can debug step by step.
After clicking the event button , Firefox Dev Tools will show the handler associated with it.
How can I edit that function to add code (eg alert(1)) to it?
What you can do is to switch to the Debugger panel by clicking the the button to the right of the event.
Though there is currently (as of Firefox 86) to edit the code in the Debugger. There's a very old feature request (created by a Mozilla staff member) for it, though, which you may want to follow.
What you can do, though, is to set a breakpoint at the position which you want to investigate to stop the script execution at that code statement.
Or if you just want to output some variable value when that code is executed, you can also set a logpoint instead.
I noticed the following in Chrome, and I confirmed that Mozilla acts the same way. On my web page I have a simple setTimeout which modifies some child nodes within a DOM tree. When I switch to another tab, and then later go back to the previous tab with my web page I notice in the console that the setTimeout is causing uncaught DOM exception errors. The setTimeout does continue working normally. To me it seems like the setTimeout continues running even when the tab is not active, but the DOM is empty, and it cannot find what it is looking for. I am wondering if any of you have experienced this, and why is this happening? Is there a way to pause the setTimeout when the tab is not active?
I have really complex page with a lot of javascript to fix. It involves a lot of functions and I need to find out one specific function, which triggers on dragging Raphael JS object. I can't figure out which one that is.
Is there some possibility to log whatever runs "right now" to console?
I know, that the output would be messy, but I would get a chance to see, what happens, whan I grab the object with my mouse.
If JavaScript is executing at that precise moment, pressing the Pause icon in the Sources tab of the Developer Tools will stop the script and show you the call stack.
If you want to debug what happens when particular event listeners happen (for instance on a drag-and-drop script), you may be able to do this by right clicking the page element, selecting Inspect Element, then in the right column of the Elements tab, scroll to the bottom and view the Event Listeners attached to that element. Clicking on a particular listener will show you the script source of that listener, and you may be able to add a breakpoint at that point. (Beware that compiled scripts can make this difficult to comprehend)
When investigating problems with a page, either my own or a third party page, one trick is to sprinkle breakpoints liberally on scripts I suspect that fire on button press etc. Then I manipulate the page with the Developer Tools open so that the breakpoints will cause debugging to halt when a breakpoint is hit.
Other tricks if it's your own code is to use console.log statements logging activity to the console, or debugger (which are like software breakpoints). And of course the old-school alert dialog box generating statements can still be useful too.
I might be wrong but you should manually use console.log() to write to browser console.
Have you tried :
console.log(yourObject)
Where yourObject is the draggable element ?
In the new chrome console, there is in depth object browsing, maybe you can find what you want in your object prototyppe.
I'm using chrome's debugger and I'm good when it comes to setting break points once a page is running. My problem is when I do either f5 or press enter on the URL line my break points disappear. How can I set a break point in code that happens when the page first loads?
In Chrome's Developer Tools, go to the Sources tab. On the right, open up Event Listener Breakpoints, and you can set breakpoints on events.
It sounds as if you'll want to set your breakpoint on DOMContentLoaded, which is under the DOM Mutation section.
After you do this, reload the page and you'll end up in the debugger.
Try putting debugger; in your code. That also works in FF's Firebug
Later versions of Safari and Firefox should work properly with breakpoints across reloads, but one needs to be sure that the query is exactly the same between requests. ExtJS 4, for instance, adds a _dc=<epoch> that will disable the cache.
To stop that behavior, add the following:
Ext.Loader.setConfig({
disableCaching: false,
enabled: true
});
Hope that helps!
Chrome JavaScript debugger
I use the next approach that is suitable for Chrome, Safari using Charles Proxy[About] and Rewrite Tool
debugger;
or if you need to make a browser console wait
setTimeout(function(){
debugger;
console.log('gets printed only once after timeout');
}, 7000);
setTimeout is a function that will trigger after delay to give a user time to attach the console
Debugger can be set also by using XHR/fetch breakpoint
In chrome developer tools -> sources tab, in the right pane you can see XHR/fetch breakpoint using that you can set breakpoint.
Add breakpoint
Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR's request URL.
If breakpoint has to be set for all XHR or fetch, please check the option Any XHR or fetch
In firefox developer, tools -> debugger tab, adding to the above feature we can set debugger based on request methods.
If you would like to stop the javascript at the time it's first loaded in the browser (and not when the DOMContentLoaded event listener is triggered which happen later) simply click on pause button in chrome debugger and reload your page with F5 keyboard button.
It worked for me.