Several Google Chrome debugging tips.
Published on July 25, 2020 by Mike Chilson
2 min READ
Need to find that class or variable? Use Dev Tool’s built-in search! To search in all files loaded on the page for a specific string, press [Ctrl] + [Shift] + [F] ([Cmd] + [Opt] + [F] on a Mac). This method of searching supports Regular expressions as well.
The DevTools console supports some handy magic variables and functions selecting DOM elements:
To learn more Console commands read the Command Line API.
Chrome’s Developer Tools has a built-in code beautifier that will help you return minimized code to its humanly readable format. The Pretty Print button is located in the bottom left of your currently opened file in the Sources tab. Give it a try!
You can press [Ctrl] + [D] ([Cmd] + [D] on the Mac) while editing files in the Sources Tab, the next occurrence of the current word (or selected word) will be selected as well, helping you edit them simultaneously.