Front-end developers spend a significant amount of time working inside the browser\u2019s DevTools. Likely just as much as they spend time writing code in the code editor. However, most developers barely scratch the surface of what DevTools can accomplish. I have been curating a collection of DevTools tips across major browsers. The following are some of the useful tips & tricks for across different browsers that will help you unlock the full potential of DevTools.<\/p>\n\n\n\n
For the sake of brevity, all the Chromium based browsers like Chrome, Edge, Opera etc,. are referred to as Chromium, because the DevTools experience and features across these browser are very similar.<\/p>\n\n\n\n
1. Inspect Popups on Hover<\/h2>\n\n\n\n
If you have ever tried to inspect popup elements like tooltips, dropdown menus etc that only appear on hover, then you would know how hard it is to inspect the popup element. The main problem with inspecting the popup elements is when you click anywhere in the DevTools, the page loses focus, which causes the popup to disappear. To solve this problem, Chromium browsers have a Emulate a focused page<\/strong> option to keep the page focused while using the DevTools.<\/p>\n\n\n\n
There are two ways to access this option in DevTools:<\/p>\n\n\n\n
\n
1. Select the element in the Elements panel that activates the popup on hover. Open the Styles pane, click :hov<\/code> button to activate the hover state. Enable the Emulate a focused page <\/strong>option to keep the main page focused while you interact with the DevTools.<\/li>\n\n\n\n
2. Open the Command Menu, and Run Show Rendering <\/strong>to open the Rendering drawer at the bottom of the DevTools. Scroll down to find the Emulate a focused page<\/strong> option and enable it.<\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n
2. Use logpoints<\/h2>\n\n\n\n
Debugging tools in DevTools have come a long way. But if you\u2019re like me, and still prefer console.log<\/code> to debug your code, there is a better way to get log output in the console without cluttering the code with console.log()<\/code> statements. It\u2019s also useful while debugging production code.<\/p>\n\n\n\n
For Chromium browsers, open the scripts in the Sources<\/strong> panel, right click on the line number and select \u201cAdd logpoint\u2026\u201d. Input the message including the variables that you want to log in the console.<\/p>\n\n\n\n\t\t\n\t\t\t
![\"\"](\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/04\/s_52E2E38C42ACB86B87D3BFE6176695A8B39C9CD0BF6927AACEC92F6B0CF47034_1711647272180_inpect-popup-elements-1024x624.png?resize=1024%2C624&ssl=1\")
<\/figure>\n\n\n\n