Chrome DevTools Tips and Tricks for Programmers
In this article I’ll summarize a few Chrome DevTools debugging tips that have been useful in my work. These have helped me solve a lot of minor problems during the development phase.
Console
Personally, I like to categorize different console messages, and luckily, Chrome DevTools has this feature!
This is what it looked like before:
Alright, There are info, error, and warning, if there is more information in the development environment, it will also affect the key information we want to find.
So, let’s clean it!
- Open the Console
- Click on the red frame in the picture.
3. Then, this sidebar will appear. This shows us each console message by category.
Filters
There are two ‘Filter’ features, both of which are very useful. The first is in the input box of the Console option.
Let’s try typing a “-test” character into the input box and see what happens in the Console(Let’s now print a piece of code in the console that console.log('test a log'))
On the left is the message of the normal log without the input in the Filter input box, and on the right is the image where we entered “-test”
This has helped us filter the log messages for “test”.
It can also achieve the same effect on the above, but NetWork is more feature.
For example, it can filter many resource types, such as Fetch/XHR, JS, CSS, Img, etc.
Create Live Expression
This is a very interesting and useful feature, I’m using it every day.
If you find yourself typing the same JavaScript expression in the Console repeatedly, you might find it easier to create a Live Expression. With Live Expressions you type an expression once and then pin it to the top of your Console. The value of the expression updates in near real-time(reference from Chrome).
Let’s create a live expression.
- Open the Console;
- Click Create Live Expression. The Live Expression text box appears.
3. Try inputing document.activeElement Then type Control+Enter or Command+Enter (Mac) to save the expression, or click outside of the Live Expression text box.
4. Try clicking on any area of the page and notice the change on the right side, it will show the tag name and class name of the element we clicked on in real time.
I’ve added another option that will show the title of the current page:
Conclusion
This article has written a few very useful Chrome DevTools features, I hope it can help you in your work, of course, it has more rich features, follow me, I will continue to update!
Thank you for taking the time to read this article! What tips and tricks do you use? Be sure to let us know in the comments!
Build composable web applications
Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable frontends and backends with a powerful and enjoyable dev experience.
Bring your team to Bit Cloud to host and collaborate on components together, and greatly speed up, scale, and standardize development as a team. Start with composable frontends like a Design System or Micro Frontends, or explore the composable backend. Give it a try →
