Is there any tool to record the change of DOM by Javascript and then re-run it slowly to debug ? Basically I want to log the html source code every second and then go through them one by one to see how the javascript is changing the page.
There is huge javascript which is difficult for me to understand. It is minified. I am only interested in watching how that script changes the state of a particular node in DOM. The changes are very fast and I want to observe it slowly.
Update:
I can add break point to pause execution of javascript whenever a dom element changes. But as I have said the element is changed too frequently. It there is something like "pause execution of JS when the number changes % 100 == 0" it would serve the requirement well
You can set breakpoints in the Chrome dev tools, which will pause all script execution on that page and give you time to examine everything.
To open the dev tools, press F12 or CtrlShiftI on Windows, or CmdOptI on Mac.
Go to the "Elements" tab, right-click on the element you want to observe, select "Break on...", and choose the events on which you want to pause.
Then let the script run, and a dark overlay should appear, saying "Paused in debugger".
If not selected automatically already, go to the "Sources" tab in the dev tools.
From there you can see the entire call stack, and see and modify all global and local variables and closures.
With F8 you can resume script execution (until the next breakpoint), and with F11 you can step forward into the next function.
Of course you can still use the console and the "Elements" tab while the page is paused.
If you need finer breakpoints, you can set a breakpoint in the source code, or replace a function in some object reference.
To set a breakpoint in the source, find your script in the "Sources" tab, prettify it via the {} button at the bottom left, and click a line number in the script. The line number should get a blue arrow after that.
To set a breakpoint by replacing a function, you'll need some object reference to work with.
Let's say we're working with jQuery, so we have a $ variable, which has a .ajax() method. We can inject a breakpoint there by doing the following:
var oldAjax = $.ajax;
$.ajax = function()
{
debugger;
return oldAjax.apply($, arguments);
};
If there is no object like $, to which you have access from the console, you can still use it, if you can set a breakpoint so that such an object will show up somewhere in the variable scope of one of the invoked functions.
From there you can right-click the value of the variable, select "Store as Global Variable" and then proceed with the method above, just using temp1 instead of $.
Related
Is it possible to extract multiple resources' URLs in Sources or Network tab of Chrome Dev Tools?
When I want to get URL of a single resource, I can do it with context menu function Copy link address
I can switch to this resource from Network to Sources tab and vice versa, but what if I have a need to get URLs of multiple resources at once? It is very cumbersome to copy them manually if resultset consists of 200-300 resources.
What I've tried so far:
To copy the whole folder from a sources tab, but from this answer I found out it is not possible for now.
To use $(selector) as specified in the Console reference, in a form of
$('img')
in case we need to fetch image URLs.
The complexity of this approach is that it's often hard to distinguish target images on a page that has hundreds of them, and furthermore, multiple versions of the same image (views, previews, small-sized icons and etc.) I.e. to match the element inside the tag with the needed resource is not that easy, as it seems. Also not all the file types have dedicated tags (as in the case with img).
Maybe I should use src tag with some modifiers? Any other suggestions?
make sure Network panel is active
switch devtools Dock side in the menu to a detached (floating) window
Next time you can press CtrlShiftD to toggle docking.
in the now detached devtools press CtrlShifti or ⌘⌥i on MacOS,
which will open devtools-on-devtools in a new window
Run the following code in this new window:
copy(UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.map(n => n.request().url()).join('\n'))
It'll copy the URLs of all requests that match current filter to clipboard.
Hint: save the code as a Snippet and run it in devtools-on-devtools window via the commands palette, CtrlP or ⌘P then type the snippet's name.
In old Chrome the code was different:
copy(UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map(n => n._request._url).join('\n'))
copy(UI.panels.network.networkLogView.dataGrid.rootNode().flatNodes.map(n => n.request().urlInternal).join('\n'))
I found the above method too clunky, its way easier to use fiddler:
open fiddler (possibly install it)
filter on the domain name that you are interested in
clear the screen
refresh the web page
Select the fiddler output
right click and select copy just the URL's
Based on #wOxxOm, this worked for me:
var nodes = UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes,
urls = [];
nodes.forEach(function() {
var req = arguments[0]._request;
if (req !== undefined) {
urls.push(req.url());
}
});
A selection and simple copy (Ctrl+C) work for me.
I select URLs in the Url column by the mouse.
Then I use the context menu to copy the list to the clipboard.
The clipboard contents then I can paste to Excel and get the URL list. It adds some empty lines though.
Image speaks for itself; this script is on the debugger's ignore list; yet every time I trigger this exception it is paused upon. I cannot uncheck Pause on caught exceptions because I am trying to pause on a caught exception in another startup script.
Devtools says The debugger will skip stepping through this script, and will not stop on exceptions, but it's doing just that, it is not skipping this script.
I've tried several things, like unignoring/reignoring. Using canary, etc. I have this problem on both my windows and osx machines; so it doesn't seem to be particularly related to my environment.
I am wondering if anyone else has run into this and found a workaround. Thank you.
Problem remains unsolved. Leaving this post here with some unsucessfull tentatives of mine, so someone can build something based on them.
1. Devtools extension API
It is possible to create an add-on that can reach the Developer Tools window and even reach the Sources tab, but once there all I could do was creating new sidepanels or attaching a listener to code text selection changes: chrome.devtools.panels.sources.onSelectionChanged.addListener((x)=>{console.log("onselectionchanged");console.dir(x);});
This API was not enough, could not reach debug status or any interesting sidepanel.
2. Debugging the debugger with a JS debugger
By hitting ctrl-shift-i or ctrl-shift-j over a devtools debug window it is possible to open another devtools debug window, debuging the first one. From there it is possible to write code that detects the banner informing that the file was supposed to be ignored and then click on the continue button:
function breakpointskipper() {
bnr = document.getElementById("sources-panel-sources-view").querySelector("div.vbox.flex-auto > div > div > div > div.flex-none > div");
if (!bnr) return;
bnr = bnr.shadowRoot;
if (!bnr) return;
bnr = bnr.querySelector("div");
if (bnr.ariaLabel != "This script is blackboxed in the debugger") return;
btn = document.querySelector("div.scripts-debug-toolbar.toolbar");
if (!btn) return;
btn = btn.shadowRoot;
if (!btn) return;
btn = btn.querySelector("div > button[aria-label=\"Resume script execution\"]");
if (!btn) return;
btn.click();
}
It is possible to even attach this breakpontskipper() button presser to an event in the devtools window and automate things, but as soon as you close the debugger being debugged window, it is all over and you have to recreate the code and reattach again. As said before, I wasn't able to make any add-on reach here.
3. Debugging the debugger with a native debugger
One last available option would be using GDB to debug the DevTools and change its behavior, in the chromium documentation it is shown that they have debug symbols available but I didn't try this approach.
Please try the troubleshooting help, and share some feedback. Also it would help greatly if you pasted some script here.
Please check if your script black boxed like here
Did you accidentally turn on - break on all exceptions see here
Force a hard refresh, i.e. clear you cache like here
Turn off all break points, then do a restore, try again.
More from ref. on chromium bug site
Update 1: Can you please verify/double check that your file to ignore is actually added to the ignore list.
If you know upfront which files to ignore, head over to Developer Tools > Settings (Cog Icon) > Ignore List. Then add a file name or regex pattern you wish to exclude.
You should see something like
With Chrome DevTools open I can place a breakpoint in a Javascript file and step through the code displayed in the "Sources" tab as it executes. The problem is that every time I hover over a variable I get an unwanted tooltip that pops up with the value of that variable.
For example if a section of code is let a = 1; then any time my cursor happens to pass over a I get a popup displaying 1. Some variables such as DOM elements can be quite large and frequently get in the way as I am trying to look at the code. I find this annoying and would like to disable this feature. Is there a way to NEVER see these tooltips?
I want to see what code is modifying a DOM element on a webpage, so I set a breakpoint in Chrome by right-clicking on the element in the Elements tab of the DevTools inspector and choosing "Break on..." -> "Subtree Modifications". The script modifies the element when the page is loaded (and not after), so I want to preserve the DOM breakpoint and refresh the page.
The process for saving breakpoints in javascript code doesn't seem to apply to DOM breakpoints.
For now I added a debugger; line before any other code runs, added a DOM breakpoint, and continued.
In Chrome, DOM breakpoints are not preserved upon refresh, they are thrown away, and then restored after the onload event. See bug report 571519, and this comment from that report:
We are preserving DOM breakpoints upon reload, but the breakpoints are only restored upon onload event. So if you expect breakpoint to trigger before that or it is set on a node that is added lazily, breakpoint is not restored. We should fix that though.
This is the workaround:
pause the Javascript, either with a normal breakpoint or with debugger; line of Javascript
remove all DOM breakpoints and add the DOM breakpoints that are needed
resume.
I believe this didn't have a proper explanation for the answer because I face the issue as well. the steps goes as follows.
open developer tools by pressing console f12,
you need to try to slow down your webpage rendering so you can be able to quickly pause javascript execution, the trick I use is to go to the network tab and set the online drop-down field to slow 3G so the pages become slower to render.
select the sources tab then on the left sidebar check breakpoints and make sure all break points are removed, if there are still some breakpoints set then remove them
click on the pause execution button on your
go back to your webpage and reload it, with the network set as slow 3g, your page becomes slower to render then you can quickly go back to sources and pause the execution the moment you can see your HTML dom is loaded. in this way your webpage is in a paused state
go to your element tab, find the element you want to set breakpoint on and set it. then go back to sources tab and click continue execution this will make the execution stop at your element's break point
I am trying to understand how to get from the chrome debugger the following info : there is an event on page triggered by a click on an input file type tag. But it is impossible for me to trace back the mecanism : which js file is called when the event is triggered. Is there a way do get this info from the debugger ?
Do you have a look at the Event Listeners entry in the right-hand window? If I right-click the 'Google-Chrome' tag at the bottom of your post, and select Inspect Element, I get the html tag highlighted. If I then look in the right-hand pane at the Event Listeners, I can see that this element has handlers for blur, click, keyup, keydown, mousedown, mouseout, mouseover. Yet just looking at the html I can't see that. If I expand the event handlers, I can see that they all point to "jquery.min.js : 3". This is because the file has been minimized and is only 4 lines - each of which is probably 20 or 25,000 chars long. Minimized scripts are difficult to analyse unfortunately.
Try it with a page that doesn't use minimizes scripts and you can click the link in the event handler window to be taken directly to the pertinant function - unfortunately, you are taken to the start of the line concerned, which makes jquery.min.js a waste of time to do this with. You can always use the non-minified version of a script for debugging purposes, switching over to the minified version for production.
With other's pages, you can sometimes get away with saving a local copy, before linking an unminified version of the script.