共计 1417 个字符，预计需要花费 4 分钟才能阅读完成。
前言
要在浏览器中执行 JavaScript 脚本，首先你的浏览器得反对。当初支流举荐 Chrome 浏览器，也能够应用基于 Chromium 的 Edge 浏览器。上面来介绍如何在 Chrome 中关上开发者工具，以及如何在开发者工具中运行调试 JavaScript 代码。
关上开发者工具
Chrome 中的开发者工具界面如下图所示。
要关上 Chrome 开发者工具来运行调试前端代码，常见的有 3 种形式。
- 右键“查看”
在 Chrome 中关上一个页面之后，咱们能够在页面中单击鼠标右键，而后在菜单中中抉择“查看”，这样就能够关上开发者工具了。
- 快捷键 F12
同样的，个别在 Chrome 中，能够间接通过 F12 快捷键来关上开发者工具。
- 菜单进入
顺次从右上角菜单栏中抉择 更多工具 -> 开发者工具 开启。当然，这里也能够看到，其实咱们也能够通过另一组快捷键来开启（Ctrl + Shift + I）。如果你对 Chrome 足够相熟，那么这也是一种可选的形式。
开发者工具中执行 JavaScript 代码
要在开发者工具中执行 JavaScript 代码，也次要能够利用两种形式，一种是在 Console 窗口对 JavaScript 代码进行调试，而另一种形式则是应用 Chrome 中的 snippets 小脚原本执行。
上面我将对这两种形式别离做一个介绍，以便大家能熟练掌握。
- Console 窗口执行
在下面关上开发者工具之后，咱们会发现一个 Console 窗口，此时只有在 Console 窗口中 > 符号后边输出咱们须要执行的代码，而后回车即可执行。
以下是两个实例，第一个实例将会在控制台中打印 公众号：村雨遥 ，而第二个实例则会在浏览器中弹窗并显示 公众号：村雨遥。
console.log("公众号：村雨遥");
window.alert("公众号：村雨遥");
- Snippet 脚本
除开在 Console 窗口中执行 JavaScript 脚本之外，咱们还能够在 Chrome 中创立一个脚本，而后再执行，具体形式如下。
在开发者工具中切换到 Sources 菜单，而后抉择其中的 Snippets 选项卡，接着点击下方的 + New snippet 来新建一个脚本文件。
咱们能够对新建的脚本文件进行重命名，而后在右侧的框中编写咱们的 JavaScript 代码，编写实现之后点击 Ctrl + Enter 即可执行，成果同在 Console 中一样。
以下是一个 Snippet 脚本执行实例，新建的脚本执行后，先是弹窗，同时在 Console 界面打印出了内容。
window.alert("公众号：村雨遥");
console.log("公众号：村雨遥");
在创立的 Snippet 脚本上单击鼠标右键，咱们能够进行如下操作：
- Run：运行，执行咱们创立的脚本。
- Rename：重命名，对咱们创立的脚本进行重命名。
- Remove：删除，移除咱们创立的脚本。
- Save as：另存为，将咱们创立的脚本导出。
留神
咱们会发现关上的 Chrome 开发者工具都是英文模式的，但实际上当初的 Chrome 开发者工具早曾经反对中文。如果您对英文界面应用起来有所艰难，能够通过以下的形式将开发者工具切换为简体中文。
点击开发者工具右上角的 ⚙，而后抉择 Language 为 Chinese，也就是咱们的中文，接着从新载入开发者工具即可。
总结
以上就是明天的所有内容了，次要介绍了如何关上 Chrome 中的开发者工具，并且利用开发者工具如何来执行 JavaScript 脚本。
如果您感觉本文还不错，欢送点赞、珍藏、转发，您的关注是我保持的最大能源！