简单使用Chrome的开发者工具调试JS代码

最新推荐文章于 2024-03-25 16:52:19 发布
最新推荐文章于 2024-03-25 16:52:19 发布
阅读量4.5k 收藏 4
点赞数 1
分类专栏： 调试 文章标签： Chrome调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38382659/article/details/91053118
版权

简单使用Chrome调试JS代码

调试区 Sources 面板

打开Chrome

  • 左边是各种文件资源
  • 中间是对应文件内容的显示区域
  • 右边是进行调试操作的区域


这些是调试区的按钮，从左到右以此是
暂停/执行 ，单步执行，单步跳入，单步跳出，禁用/启用有断点

打断点调试源代码

打开文件，在中间展示内容的JS部分，在相应的行号位置单击，则可加入断点，显示在右边的 Breakpoints 列表；再次单击，则取消该断点
平时调试就可以根据需要加断点了

点击右边的 Breakpoints 列表则中间显示部分会跳转到对应的断点位置，很方便呢

条件断点

在断点位置点击右键，选择"Edit Breakpoint…"可设置断点的条件：
可编写里面的表达式，当表达式值为true时，断点才触发，达到给断点设置触发条件的目的

各种情况下的断点

在这里插入图片描述
DOM节点设置断点：DOM Breakpoints
事件触发节点：Event Listener Breakpoints 对某一类事件设了断点后，当这些事件触发时，断点就会触发

格式化被压缩的JS代码

有些JS文件是已经被压缩过的，很难进行调试
在相应的JS文件左下角点 {} 则会出来相应的格式完的JS文件，文件名会加上:formatted 表示是被格式过的文件
在这里插入图片描述
在这里插入图片描述

打印某个变量或表达式的值

在断点调试的时候，用鼠标选择想要查看的变量或者表达式，右键选择“Evaluate in Console”, 则可在Console面板看到其当前值了

直接修改JS代码

可以直接在面板修改JS代码
但需要注意的是： 一旦刷新，代码不会保留我们的修改，恢复原来的代码

fishCrush
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何在chrome浏览器调试JS代码
猫敷雪
07-01 1334
断点。debugger 语句。error（如果开发者工具是打开状态，并且按钮 是开启的状态）。当脚本执行暂停时，我们就可以进行调试：检查变量，跟踪代码来查看执行出错的位置。开发人员工具中的选项比本文介绍的多得多。完整的手册请点击这个链接查看：https://developers.google.com/web/tools/chrome-devtools。本章节的内容足够让你上手代码调试了，但是之后，尤其是你做了大量关于浏览器的东西后，推荐你查看上面那个链接中讲的开发者工具更高级的功能。
JS检测浏览器开发者工具是否打开的方法详解
01-18
在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具，比如前端爬虫检测，如果检测到用户打开了控制台就认为是潜在的爬虫用户，再通过其它策略对其进行处理。本篇文章主要讲述几种前端JS检测开发者工具是否打开的方法。     一、重写toString() 对于一些浏览器，比如Chrome、FireFox，如果控制台输出的是对象，则保留对象的引用，每次打开开发者工具的时候都会重新调用一下对象的toString()方法将返回结果打印到控制台（console tab）上。 所以只需要创建一个对象，重写它的toString()方法，然后在页面初始化的时候就将其打印在控制台上（这里假设控制台还没有打开）
JavaScript检测是否开启了控制台（F12调试工具）
01-22
js检测用户是否打开调试工具（chrome） (function(){ var re=/x/; var i=0; console.log(re); re.toString=function(){ window.close(); return '第'+(++i)+'次打开控制台'; } })(); JavaScript检测是否开启了控制台（调试工具） 测试后在chrome有效 不少人防止别人趴源码，一般采用检测按键F12之类的，但是这些基本没什么用 现在介绍一个方法，非常管用，可以检测到你是否开启了控制台程序，可以算是JavaScript的一些奇淫巧技 将这段代码加入你的网站即可，原理不明
Chrome浏览器修改网页内容
最新发布
Winfredzhang的博客
03-25 742
【代码】Chrome浏览器修改网页内容。
DevTools:使用 Chrome 开发者工具说明基本 Javascript 调试的单页应用程序
07-02
开发者工具 用于说明使用 Chrome 开发人员工具进行基本 Javascript 调试的基本单页应用程序。 克隆回购 CD 进入“DevTools”目录 对于开发，运行grunt serve 当你准备好构建你的项目时，运行grunt build 玩得开心！
vue调试代码开发者工具
04-16
永久使用浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码
enyo-inspector:用于从Chrome开发者工具中调试Enyo应用程序的工具
05-21
Enyo开发工具 Bean Bird在这里可以帮助您立即构建更好的Enyo应用程序！ 安装 克隆此仓库，或下载zip文件 打开chrome：// extensions 启用“开发人员模式”复选框 点击“加载解压的扩展程序...” 选择enyo-inspector文件夹
渗透学习-学习记录-利用浏览器的开发者工具实时修改网页前端JS代码（实现绕过）
qq_43696276的博客
01-16 5632
最近学习了一些有关于JS脚本搭建网站方面的安全知识。通常来说JS是前端的页面代码，因此我们可以直接修改前端的JS代码来实现绕过，故我试着做了一下利用浏览器的开发者工具进行尝试修改页面，以此来直接进行绕过的实验，特此记录。
Chrome浏览器修改js代码
编程小学生
06-16 2889
Chrome修改Js代码
使用chrome开发者工具调试JavaScript代码的三种常用方法
就是喜欢JAVA
04-07 8505
对 JS 程序的调试，除了在 JS 程序中使用 alert()、console.log() 方法跟踪和调试代码外，开发人员也会经常使用一些调试工具。最常用的 JS 调试工具就是一些主流的浏览器的调试工具，如 IE11 浏览器的“开发人员工具”、Firefox 浏览器的“Firebug”工具或较新版本的“开发者>>Web 控制台”以及 Chrome 浏览器的“开发者工具”。 限于篇幅的原因，本节将只介绍 Chrome 浏览器的“开发者工具”调试工具，IE 浏览器的“开发人员工具”和 Firefox
使用Chrome开发者工具注入Javascript实现额外功能
Hoxily的窝窝
03-13 1万+
Chrome开发者工具介绍 在Chrome或Chromium浏览器里按下组合键Ctrl+Shift+I会打开开发者工具. Elements标签页，可以查看、编辑DOM元素。 Network标签页，上可以查看HTTP请求以及回复报文的详信息，包括HTTP回应码、POST时提交的表单等。Sources标签页，设断点调试时会跳到这里。当在js脚本里加debug关键字设置断点时，会用到。Time
浏览器sources里修改js代码
lihu863的专栏
07-26 2万+
如果是js文件可以直接在sources里修改，用Ctrl+s保存后，可以直接生效。 如果非js文件，是在页面里写的js，可以把要修改的js函数的代码复制到console里执行，这样就会替换掉原js里的函数。这里要注意，是要以函数为单元修改。 如原来js的有一个函数 function aa（） {   return  tag>1 } 你可以这样做 在console里执行如下： ...
Google Chrome 调试 js
绝圣弃智-零的博客
11-14 881
平常在开发过程中，经常会接触到前端页面。那么对于js的调试那可是家常便饭，不必多说。谷歌浏览器是常用来调试JS代码的工具，本文主要介绍如何利用谷歌浏览器来调试JS代码，协助我们进行开发工作，加快开发效率。       1、首先，打开谷歌浏览器，然后打开调试功能栏，按快捷键F12或者ctrl+shift+j，就可以打开谷歌浏览器的开发者工具。打开后页面如下所示。 　　 　　2、下面主要介绍一下...
在Chrome开发者工具中编写js并运行
qq_34302201的博客
11-19 1929
在Chrome开发者工具中编写js并运行 前言 今天记录一个小技巧，主要是在chrome开发工具中边编写js，边运行，学习效率大大提高~~ 通常情况下，我们在网上学习或者找一些轮子的时候，经常要在本地创建一个临时的html,js文件，再把js引入相应的html文件中，用浏览器打开相应的html文件，改个js代码都要重新刷新一遍，想一想都很麻烦懒得动，久而久之，我就变成了看看党，光看不练习，效率低到不行。。。。 今天我在网上看一些大牛写的文档的时候，有很多很基础的东西，虽然看一眼就会的那种，但是想一想还是自
chrome浏览器F12调式，修改替换js文件
热门推荐
u014644574的博客
12-14 3万+
在F12模式下，有时可以直接修改js源码，Ctrl + S 保存就可以了。但是有时这种方法会不起作用，这里介绍本地替换js的方式。 案例：比如csdn想复制别人的一段文字并保留样式，但是字符长度大于140就不起作用了。 1、通过右键定位需要修改的js文件 当然某些网站，只需要复制文本，直接点下面移除就可以了。 定位js在边栏的位置 2、在本地新建一个js文件，用来存放替换js文件 3、浏览器选择替换文件在本地的存放位置 点击允许访问 4、保存并覆盖 4、格式化...
Chrome谷歌浏览器在DevTools中调试JS代码格式化
O(∩_∩)O哈哈~
02-23 1507
格式化Chrome浏览器中DevTools视图中调试的JS
Chrome 中的 JavaScript 断点设置和调试技巧
wqc02的专栏
04-23 3596
你是怎么调试 JavaScript 程序的？最原始的方法是用 alert() 在页面上打印内容，稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~，用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题。不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了。本文主要介绍其中的 JavaScript 断点设置和调试功能
用Chrome的开发者工具修改JS代码并使之生效
new03的专栏
10-26 1万+
在Elements选项卡里面直接修改script标签里面函数体内的信息，这样不行你需要去console选项卡重新定义下函数就行了function ab() { alert(333);}  //原来的。你去console选项卡输入function ab() { alert(333333333);}后回车就可以更新ab函数了...
chrome开发者工具
08-05
Chrome开发者工具是一款由Google开发的强大的Web开发调试工具。它内置于Chrome浏览器中，并提供了一系列功能，帮助开发人员在浏览器中进行调试、分析和优化网页。 使用Chrome开发者工具，你可以查看和编辑网页的HTML、CSS和JavaScript代码，检查元素属性和样式，调试JavaScript代码，模拟移动设备和网络条件，分析网页性能，查看网络请求和响应以及执行其他许多有用的任务。 你可以通过按下F12键或右键点击页面并选择"检查"来打开Chrome开发者工具。一旦打开，你将看到一个面板，其中包含多个选项卡，例如Elements、Console、Sources、Network等，每个选项卡都提供了不同的功能和工具。 总之，Chrome开发者工具是一个强大且必不可少的工具，可帮助开发人员调试和优化网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值