In 2020, we had over 26 million web developers all over the world. And by the end of 2023, the number is forecast to reach 27.7 million. Web development has become a hot skill to learn. That’s because of the new trends in the industry and the demand for skilled web developers.
If you are a developer yourself, you must keep yourself updated with the emerging technologies and new ways to deal with the common occurring web issues.
Though you must spend a few hours daily in reading and learning to understand a deep understanding of the field, some hacks can be learned in a 5-minute read.
In this article, you will learn a few useful tips and tricks for DevTools. But before that, let’s have a quick introduction to DevTools.
What is DevTools?
Also known as Google Chrome Developers Tools, it is a set of web authoring and debugging tools part of your browser. During the development, process developers have to perform testing and debugging to make the application error-free. This is where these tools come in handy.
Using DevTools developers can access their web applications and browsers, and do everything from testing to measuring the performance of their website.
Learning hacks can simplify your job and boost productivity. Excited to learn a few of those?
Amazing Tips & Tricks For DevTools
1.Turn ‘On’ the Design Mode
Developers love flexibility at the time of debugging. And if they can see the impact of a particular change in advance, that simplifies their job. DevTools give you the option to turn the design mode on. That way you will be able to edit any text on your website and check how your content looks after the changes.
To do this, open the DevTools and go to the Console tab. Then type document.designMode = “on” and press the enter key.
The best bit is, all browsers support this.
2.Multi-line Editing
Developers often have to mess with a specific website design. Most of the time it involves playing with JavaScript. DevTools can help you in this area as well. Though there are other tools available for this job, like CodePen, they can be quite heavy and time-consuming.
For multi-line editing, go to Sources Sources → left drawer → optionally double arrow in “sub-tabs” → Snippets.
There you will find a dedicated coding playground for this purpose. Just click New Snippet and start writing. Once you’re done, you have the option to run your Snippet or delete it if you want to,
- Terminating Script in the Debug Mode
If by chance, a function is having an infinite loop, or utilizes jQuery and keeps pushing you in the minified jQuery file, you will have to terminate the script in the debug mode.
Previously, the developer had to click the Resume script execution button again and again until the issue was fixed. Another way to fix it was to close the inspector entirely.
Now, you can go to the Sources panel and click “ pause”. The option will change into “Resume Script Execution”. Now click and hold it then select the “Stop Current JavaScript Call”.
4.Edit HTML Element
Do you think HTML editing takes most of your time? Don’t worry, here’s the solution for you. Now you can edit HTML elements in no time, and alongside preview changes by selecting any element.
Just choose a DOM element within the panel and click on the opening tag. Edit the element you want to and see how the website would look like after a certain change.
5.Blackboxing
A common problem developers face is when they are stepping through the code, the debugger steps into minified jQuery code. You can avoid this problem by black-boxing JavaScript source files.
Go to the Settings panel, you will find a list under settings that includes Blackboxing. You have the option to add a filename or match a regular expression.
6.JavaScript Breakpoints
Setting up breakpoints is a recommended practice when you are debugging JavaScript. Fortunately, there’s a way to set breakpoints in the Chrome DevTools. Just click on the number you want to break and then press Ctrl+R to refresh the page.
- Security Check
Security checks, especially checking if the SSL/TLS certificate is valid, are an important part of web debugging. You have to determine if the connection is 100% secure or not and if all the resources are served securely.
DevTools let you do this with minimum effort and in little time. You can go to the Security panel and press Ctrl+R to refresh the page. This will pop up the relevant security information in front of you.
- Font Editor
Fonts are the basic ingredients of any enticing web page. They affect the readability of text content to a great extent. And as a developer, you have to play with the size, color, height, and other dynamics of a certain font family.
The Font Editor tool in the DevTools lets you adjust the font attributes. You can inspect an HTML element to edit the font properties and under the Inspector tab, you will find a sub-tab called Fonts.
