Chrome中执行js代码有几种方式，分别是怎样的-群英

上一篇：JS输出数据是怎样实现的，有哪些方式呢？下一篇：JS监听事件的常用方法有哪些

在日常操作或是项目的实际应用中，有不少朋友对于“Chrome中执行js代码有几种方式，分别是怎样的”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

一、打开开发者工具

Chrome 中的开发者工具界面如下图所示：

要打开 Chrome 开发者工具来运行调试前端代码，常见的有 3 种方式。

在 Chrome 中打开一个页面之后，我们可以在页面中单击鼠标右键，然后在菜单中中选择**“检查”**，这样就可以打开开发者工具了。

同样的，一般在 Chrome 中，可以直接通过 F12 快捷键来打开开发者工具。

依次从右上角菜单栏中选择更多工具 -> 开发者工具开启。当然，这里也可以看到，其实我们也可以通过另一组快捷键来开启（Ctrl + Shift + I）。如果你对 Chrome 足够熟悉，那么这也是一种可选的方式。

要在开发者工具中执行 JavaScript 代码，也主要可以利用两种方式，一种是在 Console 窗口对 JavaScript 代码进行调试，而另一种方式则是使用 Chrome 中的 snippets 小脚本来执行。

下面我将对这两种方式分别做一个介绍，以便大家能熟练掌握。

在上面打开开发者工具之后，我们会发现一个 Console 窗口，此时只要在 Console 窗口中 > 符号后边输入我们需要执行的代码，然后回车即可执行。

以下是两个实例，第一个实例将会在控制台中打印公众号：村雨遥，而第二个实例则会在浏览器中弹窗并显示公众号：村雨遥。

console.log("公众号：村雨遥");

window.alert("公众号：村雨遥");

除开在 Console 窗口中执行 JavaScript 脚本之外，我们还可以在 Chrome 中创建一个脚本，然后再执行，具体方式如下。

在开发者工具中切换到 Sources 菜单，然后选择其中的 Snippets 选项卡，接着点击下方的 + New snippet 来新建一个脚本文件。

我们可以对新建的脚本文件进行重命名，然后在右侧的框中编写我们的 JavaScript 代码，编写完成之后点击 Ctrl + Enter 即可执行，效果同在 Console 中一样。

以下是一个 Snippet 脚本执行实例，新建的脚本执行后，先是弹窗，同时在 Console 界面打印出了内容。

window.alert("公众号：村雨遥");
console.log("公众号：村雨遥");

在创建的 Snippet 脚本上单击鼠标右键，我们可以进行如下操作：

注意;

我们会发现打开的 Chrome 开发者工具都是英文形式的，但实际上现在的 Chrome 开发者工具早已经支持中文。如果您对英文界面使用起来有所困难，可以通过以下的方式将开发者工具切换为简体中文。

点击开发者工具右上角的，然后选择 Language 为 Chinese，也就是我们的中文，接着重新载入开发者工具即可。

总结:

感谢各位的阅读，以上就是“Chrome中执行js代码有几种方式，分别是怎样的”的内容了，经过本文的学习后，相信大家对Chrome中执行js代码有几种方式，分别是怎样的都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！

标签： Chrome中执行js代码

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：JS输出数据是怎样实现的，有哪些方式呢？下一篇：JS监听事件的常用方法有哪些