Easy Tutorial
Js Scope Jsref Class Extends Js Window Location Js Statements Js Variable Js Typeof Js Lib Prototype Js Cookies Javascript Json Parse Js Strict Js Json Js Conventions Js Loop For Js Function Parameters Js Htmldom Nodelist Js Objects Met Win Postmessage Js Comparisons Js Datatypes Jsref Split Js Ex Objects Js Function Js Chrome Js Async Js Obj String Js Obj Regexp Js Validation Api Js Htmldom Elements Js Form Validation Jsref Obj Array Js Function Closures Jsref Class Super Js Void Js Comments Js Object Prototype Js Ex Browser Js Class Inheritance Js Obj Date Js Summary Js If Else Js Htmldom Html Js Window History Jsref Regexp G Js Syntax Js Obj Math Js Loop While Js Window Jsref Obj Date Js Lib Jquery Js Examples Js Variables Js Switch Js Operators Js Obj Intro Js Break Js Obj Number Jsref Regexp I Js Let Const Js Htmldom Eventlistener Js Obj Array Js Timing Js Errors Jsref Replace Js Mistakes Js Htmldom Js Validation Js Tutorial Js Promise Js Function Invocation Js Reserved Js Htmldom Events Js Ex Dom Jsref Search Js Obj Boolean Js Output Js Libraries Jsref Match Js Htmldom Css Js Regexp Js Type Conversion Js Htmldom Collections Js Function Definition Js Events Js Class Intro Javascript Async Jsref Constructor Class Js Debugging Js Functions Js This Js Window Screen Js Howto Javascript Json Stringify Js Intro Jsref Class Static Js Window Navigator Obj Window Js Class Static Js Strings Index Js Popup Js Hoisting
❮ Js Function Js Async ❯

Executing JavaScript in Chrome Browser

This section introduces how to run and debug JavaScript code in the Chrome browser.

Chrome is a free web browser developed by Google, which is very convenient for front-end development, especially for debugging code.

Chrome official website address: https://www.google.com/intl/zh-CN/chrome/.

In the Chrome browser, we can open the developer tools by pressing the F12 key or right-clicking the page and selecting "Inspect".

Alternatively, you can open it by selecting "More Tools" => "Developer Tools" from the top-right menu bar.

1. Debugging JavaScript Code in the Console Window

After opening the developer tools, we can debug JavaScript code in the Console window, as shown in the following image:

In the image above, we input the code we want to execute console.log("tutorialpro") after the > symbol and press Enter to execute it.

We can also copy a piece of code from elsewhere and execute it in the Console window, such as copying the following code and pressing Enter to execute it:

console.log("tutorialpro-1")
console.log("tutorialpro-2")

To clear the contents of the Console window, you can press the following button:

2. Chrome Snippets

We can also create a script to execute in the Chrome browser. In the developer tools, click the Sources panel, select the Snippets tab, right-click in the navigator, and then choose Create new snippet to create a new script file.

If you don't see Snippets, you can click the >> on the panel to reveal it.

After clicking Create new snippet, a file will be automatically created. You just need to input the following code in the right window and then press Command+S (Mac) or Ctrl+S (Windows and Linux) to save the changes.

console.log("tutorialpro-1")
console.log("tutorialpro-2")

After saving, right-click the file name and select "Run" to execute the code.

❮ Js Function Js Async ❯