How do I get Chrome to display the page while paused in the debugger?

I am working with a web application that does some pretty heavy DOM manipulation with JavaScript, and I use Chrome developer tools extensively to create the page and functions. The problem is that sometimes when the page stops at either a breakpoint or a linedebugger;

, the page in the viewport isn't greyed out, doesn't get the "Paused in debugger" message, it doesn't get highlighted in the blue DOM element I selected in Dev Tools, and it doesn't redraw or update the render or anything when the DOM is manipulated Javascript. When I pause the debugger and the code exits, the reprocessing is done as expected, but when I step through the code line by line in the debugger, the re-rendering does not occur until the code is finished and the debugger resumes. This is really a problem when I am specifically trying to debug some processing related problems. This is an inconsistent problem. For example, in the project I am currently working on, there is an onResize () method that is triggered on initial page load,and also (obviously) when the viewport is resized. If Chrome Dev Tools pauses during the first run of onResize (), it works as expected, making changes to the page every step of the way. But if it pauses during the subsequent run of this method, during the actual resize event, the problem described above happens and I don't see any change in the rendering until the code finishes running.and I don't see any change in rendering until the code is done.and I don't see any change in rendering until the code is done.

Does anyone have any idea why this is happening, or what I can do about it?

+3


source to share





All Articles