What is Chrome DevTools?
Why should you use Chrome DevTools?
Everything happens. The problems can be different just like when the written code for no reason refuses to work. That’s why in order to quickly understand the cause, correct the situation, to find out what a code problem is and how to solve it effectively, you need to master a set of tools. For such cases it is very useful for us to use Chrome DevTools, which is one of the most powerful web developer tools.
For whom it will be helpful?
For every person, who is interested in and involved in web development and cares about its effectiveness. Undoubtedly, it is a must-read for the beginner developers. I am certainly convinced that every reader will be able to find something new and useful in this article, regardless of their experience in development.
- Open the Chrome browser on your computer.
- In the upper right corner, click More Settings.
- At the bottom of the page, select Advanced.
- In the “Privacy and Security” section, click Content Settings.
- Set the switch to the Enabled position (recommended).
1. When you open the Console panel, immediately click on the tab SOURCE. Than in the SOURCE panel you will see 3 parts. They are:
- The list of files. On that tab you can see all needable files which are requested.
- The informative tab. When the files are selected, the information and plot of the file is described there.
2.Then return to the Console. Here you can build or change a page, it’s really important to write and test statements in the Console in order to change the appearance of the page. Write:
“document.getElementById(‘hello’).textContent = ‘Hello, Console.” Start watching and estimating the following results. Try to observe how the text inside the button changes.
The first step – to open dev tools in chrome: Press command+option+J(on MacBooks) and ctrl+shift+J (on non mac)
The second step – to click on the button named “source” to open a panel, so the sub-tab will be also opened.
The third – to choose more tabs and click on a snippet.
The fourth – think about the name, which you will give for your snippet.
The fives – begin writing your own code, like you do it in Console.
The sixth – If you have done everything, click on the Run (>) button. You can set breakpoints in snippets and debug them as ordinary scripts.
You may use the snippet by writing ctrl+enter or command+enter.
In addition you may have access to the code directly from the console. As a result, if you ever need to write the code you can definitely use your snippet.