Executing JavaScript in Chrome Browser


This chapter introduces how to run and debug JavaScript code on the Chrome browser.

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

Chrome official website address: https://www.google.com/intl/en-US/chrome/ .

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

image.png

You can also select "More tools" = "Developer Tools" in the upper right corner of the menu bar to open:

image.png

1. Debug JavaScript Codes in the Console Window

After opening the developer tools, we can debug JavaScript code in the Console window, as the screen shot below:

image.png

In the above figure, we enter the code we want to execute console.log("tutorialfish.com") after the > symbol , and press Enter to execute it.

You can also copy a piece of code in other places to execute it, for example, copy the following code to the Console window and press Enter to execute:

console.log("tutorialfish.com -- A")
console.log("tutorialfish.com -- B")

image.png

To empty the Console window to the content, you can press the following buttons (Clear Console):

image.png


2. Chrome Snippets Script

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

image.png

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

image.png

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

console.log("tutorialfish.com -- A")
console.log("tutorialfish.com -- B")

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

image.png