实现在 Chrome 中执行 JavaScript 代码

目录
  • 一、打开开发者工具
    • 1.右键“检查”
    • 2.快捷键F12
    • 3.菜单进入
  • 二、开发者工具中执行JavaScript代码
    • 1.Console窗口执行
    • 2.Snippet脚本

前言：

要在浏览器中执行 JavaScript 脚本，首先你的浏览器得支持。现在主流推荐 Chrome 浏览器，也可以使用基于 Chromium的 Edge 浏览器。下面来介绍如何在 Chrome 中打开开发者工具，以及如何在开发者工具中运行调试 JavaScript 代码。

一、打开开发者工具

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

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

1.右键“检查”

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

2.快捷键 F12

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

3.菜单进入

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

二、开发者工具中执行 JavaScript 代码

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

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

1.Console 窗口执行

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

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

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


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

2.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 脚本。

到此这篇关于实现在 Chrome 中执行 JavaScript 代码的文章就介绍到这了,更多相关 Chrome 中执行 JavaScript 内容请搜索村雨遥以前的文章或继续浏览下面的相关文章希望大家以后多多支持村雨遥！

赞 (0)

相关推荐

  • 在Chrome DevTools中调试JavaScript的实现

    由浅入深说一说怎么样在 Chrome DevTools 中调试 JavaScript. 一.案发现场 为了方便理解,我写了一个小demo. 点击打开demo: 在num1中输入6: 在num2中输入9: 点击 num1+num2,按钮下方的标签显示 69,结果应为 15,这就是我们需要断点调试找出的 BUG . 二.熟悉一下 Sources 面板 DevTools 可为更改 CSS.分析页面加载性能和监控网络请求等不同的任务提供许多不同的工具. 我们就在 Sources 面板中调试 JavaSc

  • chrome浏览器如何断点调试异步加载的JS

    chrome浏览器如何断点调试异步加载的JS

    前言 在我们日常开发中,常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢?下面来一起看看. 这是我们用Sources断点调试的实例图: 图中我们可以看到,在index.js中我们通过$.getScript引入test.js,看看表现如何: 我们在Network中看到test.js已经成功引入,但是它却属于XHR类请求,这样我们在Sources必然找不到它. 不出所料

  • JS写谷歌浏览器chrome的外挂实例

    JS写谷歌浏览器chrome的外挂实例

    提到浏览器外挂很多朋友都很疑惑,外挂不是都在游戏上才用的到么?其实侧不然,小编今天通过一个小小的实例给大家带来了JS写的浏览器外挂. 本次外挂实现的功能就是通过刷网页楼层来实现抽奖的小功能. 思路,自动填写内容,然后触发按钮的点击事件 在谷歌的控制台,这里可以直接输入js代码执行你想执行的动作的, 按照以上逻辑那么只需要添加一段定时js,执行回帖任务就ok了. 代码如下 window.setInterval(function(){ window.document.getElementById("

  • Chrome调试折腾记之JS断点调试技巧

    Chrome调试折腾记之JS断点调试技巧

    JS调试技巧技巧 一:格式化压缩代码 技巧二:快速跳转到某个断点的位置 右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该断点的位置 技巧三:查看断点内部的作用范围[很实用] 右侧的scope可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等.. 技巧4:监听事件断点 右侧的Event Listener Breakpoints可以选择性的监听某类行为事件,比如键盘

  • JS使用Chrome浏览器实现调试线上代码

    前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境传给我们的时间格式和生产环境时间格式不一致,数组对象不一致等导致线上生产报错的bug. 为了更好的在线上环境检测到具体的bug,节省我们在本地把地址改为生产的地址并走多一遍流程测试的麻烦,Chrome浏览器dbug测试就显得尤为重要了. 一.定位js代码并标记dbug 首先F12打开控制台,然后选择

  • 实现在 Chrome 中执行 JavaScript 代码

    实现在 Chrome 中执行 JavaScript 代码

    目录 一.打开开发者工具 1.右键“检查” 2.快捷键F12 3.菜单进入 二.开发者工具中执行JavaScript代码 1.Console窗口执行 2.Snippet脚本 前言: 要在浏览器中执行 JavaScript 脚本,首先你的浏览器得支持.现在主流推荐 Chrome 浏览器,也可以使用基于 Chromium的 Edge 浏览器.下面来介绍如何在 Chrome 中打开开发者工具,以及如何在开发者工具中运行调试 JavaScript 代码. 一.打开开发者工具 Chrome 中的开发者工具

  • PowerShell中执行Javascript的方法示例

    背景与问题 别人写了一个Web应用程序,使用的是ASP.NET Forms技术.其中用到了一个DropdownList控件,用户选择了某项后,页面会回传,然后在下面再动态的显示另外一个控件,逻辑很简单. 这是产生的的部分的html源码: 复制代码 代码如下: <select name="eventTypeDropDown" id="eventTypeDropDown" onchange="javascript:setTimeout('__doPost

  • Powershell小技巧之使用Jint引擎在PowerShell中执行Javascript函数

    Powershell小技巧之使用Jint引擎在PowerShell中执行Javascript函数

    这里演示如何利用PowerShell将一段Javascript函数字符串交给Jint引擎去执行. 执行Javascript函数 .Net版的Javascript解释器 可以从Git上获取Jint的代码,也可以从nuget上下载Jint的程序集. Jint是一个面向.Net的Javascript解释器.Jint不会把Javascript编译成.Net字节码,所以它非常适用于脚本小且运行起来速度快的工程,或者运行在不同平台上的脚本. PowerShell调用 拿到Dll根据-Path参数直接使用Ad

  • 在HTML代码中使用JavaScript代码的例子

    <script></script> 标签 要在 HTML 中使用 JavaScript ,需要使用 <script></script> 标签,并定义 type 属性值为 text/javascript ,正如前面的 alert 弹出提示框 例子所示: 复制代码 代码如下: <script type="text/javascript"> alert("我是提示文字!"); </script> 通常

  • 使用PyV8在Python爬虫中执行js代码

    前言 可能很多人会觉得这是一个奇葩的需求,爬虫去好好的爬数据不就行了,解析js干嘛?吃饱了撑的? 搜索一下互联网上关于这个问题还真不少,但是大多数童鞋是因为自己的js基础太烂,要么是HTML基础烂,要么ajax基础烂,反正各方面都很烂.基础这么渣不好好去学基础写什么爬虫? 那你肯定要问了"请问我的朋友,你TM怎么也有这个需求?莫非你是个技术渣?" 非也非也,博主作为一个拥有3年多前端经验的攻城尸,怎么会被这个问题给难倒呢,老夫今天遇到的问题很显然没有那么简单. 问题 那么博主到底是遇到

  • 在HTML中插入JavaScript代码的示例

    在HTML文档中的任何地方可包括JavaScript代码.但也有以下的最佳方法来包含JavaScript在HTML文件. 在 <head>...</head> 部分. 在 <body>...</body> 部分. 在<body>...</body> 和<head>...</head> 部分. 脚本和外部文件,然后包括在<head>... </ head>部分. 在下面的章节中,我们将看到

  • Java执行JavaScript代码

    我们要在Java中执行JavaScriptMethods.js中的execute(s1,s2)方法,JavaScriptMethods.js文件内容如下: function execute(s1, s2){ return s1 + s2; } 首先需要定义一个接口,这个接口中给出与要执行的JavaScript方法一样的方法签名,我们定义接口Methods,它的内容如下: /** * 接口中的方法签名必须与要执行的JavaScript方法一致 * @author yuncong * */ publ

  • 在vs2010中调试javascript代码方法

    在vs2010中调试javascript代码方法

    操作步骤如下: 1. javascript代码中插入:debugger,如下: <script type="text/javascript"> debugger; </script> 2.将IE浏览器中的"禁止脚本调试"这一项的勾给去掉. 然后在点击vs中的调试即可.

  • javaScript函数中执行C#代码中的函数方法总结

    方法一: 1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中; 2.在前台写一个js函数,内容为document.getElementById("btn1").click(); 3.在前台或后台调用js函数,激发click事件,等于访问后台c#函数; 方法二:1.函数声明为public 后台代码(把public改成protected也可以)  以下是引用片段: 复制代码 代码如下: public string ss() { return("a&quo

  • C#执行Javascript代码的几种方法总结

    一.开源项目 Javascript .NET 地址:http://javascriptdotnet.codeplex.com/ 它是Google Chrome V8引擎在.NET上的封装,功能完善,性能相对较高,推荐使用! (缺点就是asp.net web应用上,好象会报错) 示例代码: 复制代码 代码如下: using Noesis.Javascript; using System; using System.Collections.Generic; namespace JsCSharp {

随机推荐