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" .
You can also select "More tools" = "Developer Tools" in the upper right corner of the menu bar to open:
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:
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")
To empty the Console window to the content, you can press the following buttons (Clear Console):
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:
If you don't see Snippets, you can click >> on the bottom panel to see it.
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.
