Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to execute JavaScript code in Chrome", so the editor summarizes the following contents, detailed contents, clear steps, and certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to execute JavaScript code in Chrome" article.

Foreword:

To execute a JavaScript script in a browser, your browser must first support it. Now the mainstream recommends Chrome browsers, or you can use Chromium-based Edge browsers. Here's how to open developer tools in Chrome and how to run and debug JavaScript code in developer tools.

First, open developer tools

The developer tools interface in Chrome is shown in the following figure:

There are three common ways to open Chrome developer tools to run and debug front-end code.

1. Right-click "check"

After opening a page in Chrome, we can right-click on the page and select * * "check" * * from the menu to open the developer tool.

two。 Shortcut key F12

Similarly, in general, in Chrome, you can open developer tools directly through the F12 shortcut.

3. Menu entry

Select more tools from the upper right corner menu bar-> developer tools to open. Of course, you can also see here that we can also turn it on through another set of shortcut keys (Ctrl + Shift + I). If you are familiar with Chrome, this is also an option.

Second, execute JavaScript code in developer tools

There are also two main ways to execute JavaScript code in developer tools, one is to debug the JavaScript code in the Console window, and the other is to use the snippets script in Chrome.

Below, I will make an introduction to these two ways, so that you can master them skillfully.

1.Console window execution

After opening the developer tools above, we will find a Console window. Just enter the code we need to execute after the > symbol in the Console window, and then enter to execute it.

Here are two examples. The first example will print the official account in the console: village Yuyao, while the second instance will pop up in the browser and display the official account: village Yuyao.

Console.log ("official account: village Yuyao")

Window.alert ("official account: village Yuyao")

2.Snippet script

In addition to executing the JavaScript script in the Console window, we can also create a script in Chrome and then execute it as follows.

Switch to the Sources menu in the developer tool, select the Snippets tab, and click + New snippet below to create a new script file.

We can rename the newly created script file, then write our JavaScript code in the box on the right, and then click Ctrl + Enter to execute it, the effect is the same as in Console.

The following is an example of Snippet script execution. After the newly created script is executed, the pop-up window is first displayed and the content is printed in the Console interface.

Window.alert ("official account: village Yuyao"); console.log ("official account: village Yuyao")

By right-clicking the created Snippet script, we can do the following:

Run: run and execute the script we created.

Rename: rename the script we created.

Remove: delete and remove the script we created.

Save as: save as to export the script we created.

Pay attention

We will find that the Chrome developer tools opened are all in English, but in fact, the current Chrome developer tools already support Chinese. If you have difficulty using the English interface, you can switch the developer tool to simplified Chinese in the following ways.

Click ⚙ in the upper right corner of the developer tool, then select Language as Chinese, that is, our Chinese, and then reload the developer tool.

The above is about the content of this article on "how to execute JavaScript code in Chrome". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.