Hello to all curious people who are looking for interesting information and tips about how you may run JavaScript in chrome developer tools.
It is obvious that every modern browser has built-in developer tools with the help of which you are allowed to quickly catch and fix errors in markup or in code For example, a mobile app development company emphasizes that thanks to those abilities, you can find out how the DOM tree was built, what tags and attributes are on the page, why fonts were not loaded, and much more. In addition, by using JavaScript on Internet pages you can display some elements. Popular examples include data entry forms, drop-down menus, viewing photos in a separate window, and many other cases.
In this article, I will go over the basic features of Chrome DevTools and tell you how to run JavaScript here, so you would easily understand and possess all the information efficiently and quickly.
What is Chrome DevTools?
Chrome DevTools
is a built-in collection of web developer tools in the Google Chrome browser. DevTools easily assist you in editing webpages immediately and identifying errors and drawbacks as snappily as it is possible, which is definitely beneficial for you to create and design better websites, quicker. With their help you can view and debug the HTML of the site, its CSS and JavaScript. You can also check the network traffic consumed by the site, its speed and many other parameters.
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.
First of all, before using the acquired knowledge as how to run JavaScript in Chrome developer tools you have to remind yourself how to use it in general. In case if you want to do it professionally right or you have some difficulties or even you don’t clearly understand the whole situation you should hire a JavaScript Developer.
How to enable JavaScript support in the browser:
- 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.
- Select JavaScript.
- Set the switch to the Enabled position (recommended).
How to open DevTools and what you can do with the help of JavaScript?
According to the fact that many users want fast access to different parts of the DevTools UI, there are a lot of ways how to open it. If we are talking about how to run JavaScript, you should press Command+Option+J on Mac or ctrl+shift+J on Windows to jump straight into the Console panel.
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.
- The JavaScript tab. A huge variety of instruments for observing and testing the Script. If your DevTools screen is broad, it will be situated to the right of the informative tab.
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.
3.From time to time there may be causes that you need to try unfamiliar codes and to see how they work. The Console is the perfect place for testing and doing some experiments with any Javascript code.
4. Reproducing an error is the first step to debugging which means detecting a series of actions that lead to its appearance. You should click on an OPEN DEMO. Then enter any number you want like 3 in the Number 1 text box. In the next text box 2 enter another number you want like 4. Add these numbers to observe the results. It has shown that 3+4= 34, that means the wrong answer and this is an error you are going to fix. To fix the errors you have to use the Console with the help of JavaScript. These things are really difficult and maybe it would be a good idea to hire a JavaScript Developer.
Moreover there are another ways how to run JavaScript snippets with Chrome Dev Tools:
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.
Conclusion
Thanks to the development, the technology is rapidly moving and we can’t even imagine how progressive it is. There are browsers that have many wonderful and incredibly useful features that can be used by experienced developers and beginners. One of the great examples is Chrome developer tools – is a built-in collection of web developer tools in the Google Chrome browser. Here are plenty of opportunities like an immediate explanation of the cause, ways how to correct the situation, a research of what has caused a problem and how to solve it effectively. Moreover, there are a lot of ways to run JavaScript in Chrome developer tools, which are given above. As a consequence, make up your mind that during your work unfortunately you can make mistakes, so I recommend you to hire a JavaScript Developer to make your work easier and more pleasant.
