How to view elements tab and sources tab at the same time in chrome dev tools
google-chrome, google-chrome-devtools, html
Solution
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":
Problem
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...