Menu
I have a rogue blank <div> getting inserted from somewhere in my code, and it is difficult to find when it is coming in. I am using debugger; and stepping through the code, however, the step function is in the 'Sources' tab of chrome dev tools, and the 'Elements' tab has the view I need. I have two screens, and have the dev tools on one screen and the page on the other, but I need to see when the div is coming through on the HTML as I step through the code, and it is quite cumbersome to switch tabs after each click.
Is there any way to accomplish this view to troubleshoot faster (maybe a second instance of dev tools? or split the tabs?), or another suggestion? Since I don't know how it is getting generated, I can't color the div and just look for the color to come on screen...
538
Vertical split You can undock the developer tools (by clicking on the icon in the bottom-left corner), which moves it to a new window. Then press Esc to open the console. Both the window and the "small console" can be resized to meet your needs.
Right-clicking a specific page element will open that element in the inspector view. Select Tools > Web Developer > Inspector from the top menu bar. Use the shortcut control-shift-C in Windows or command-option-C in macOS.
Fortunately, there is a tool that makes repaints spotting easier — Layers panel in Chrome Dev Tools. To reveal the panel you need to open a customisation menu in Chrome Dev Tools and in “More Tools” choose “Layers” option.
It is still not possible to display the elements and source tabs at the same time on chrome dev tools. (Latest Chrome version: v64).
If some element is inserted to your DOM and you want to find code responsible for adding it then I suggest using more appropriate tool than debugger;. Check out "subtree modifications":
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
