View Elements and Sources at the same time in Chrome DevTools

user_4556848 0
Viewed 1302

I found multiple questions about seeing Sources and console at the same time and it easy to do so. When I am debugging JS it is extremely useful to explore Elements to look at the HTML structure and check the selectors while executing step by step execution.

Is there any way to vertically split the DevTool and look at Elements and Sources at the same time? If this is not possible it could be that I am proceeding in the wrong way. How do you usually debug your JS and check the selectors within Chrome?

devtools google-chrome javascript debugging
2 Answers

Yes, you can reposition different tab according to your wish. You can right-click on the Sources tab and then move it to bottom.

Elements and Sources tabs

When you have the developer tools open in Chrome , go to Sources tab and then press Esc button. It launches console window at the bottom. Console

user_10341110

Is there any way to vertically split the DevTool and look at Elements and Sources at the same time?

No, not at the moment.

How do you usually debug your JS and check the selectors within Chrome?

When you mark an element in the "Elements" tab it will be available in the console as $0, you can also right-click it and select "save as global variable". If you want to check CSS selectors you can "copy CSS selector" from that same menu.

You can just "switch tabs" from "sources" to "elements" to switch between the debugger and the elements tab and you can do this with a keyboard shortcut (command + shift + p to quickly switch between tabs or run actions).

You can also set DOM breakpoints (for events or when elements get changed), or use the DOM API to work with elements directly from sources using the console drawer.

user_13481950
Related