Chrome DevTools调试/修改代码

最新推荐文章于 2024-05-19 23:05:42 发布
最新推荐文章于 2024-05-19 23:05:42 发布
阅读量4.5k 收藏 5
点赞数 1
分类专栏： 基础知识 文章标签： 前端 debug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41935198/article/details/118114505
版权

文章目录

调试代码

  1. 根据报错逻辑找到本地代码文件
  2. 打开DevTools，找到Sources，cmd + P打开搜索框，输入文件名找到运行时代码文件
    在这里插入图片描述
  3. 在对应文件下 cmd + F打开搜索框，搜索代码定位需要debug的逻辑
    在这里插入图片描述
  4. 在疑似出问题的行打断点，用右上角的各种按钮单步执行代码，查看变量状态
    在这里插入图片描述
    在这里插入图片描述

线上修改/覆盖代码(Overrides)

  1. 在DevTools -> Sources -> 右侧面板选择Overrides，点击添加文件夹，左上角点击允许
    在这里插入图片描述
  2. 在Network中搜索需要修改替换代码的文件，右键选择最后一项“Save for overrides”
  3. 在Overrides对应文件中修改代码并保存
    在这里插入图片描述
  4. 刷新页面查看修改后效果
PhotograpHB
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端小技能：Chrome DevTools中的操作技巧
iOS逆向与安全
12-09 1009
Mac 使用 command+option+I 即可打开DevTools。
chrome浏览器开发者工具devTool 源代码添加工作文件夹或替换项文件夹报：无法添加文件系统：＜permission denied＞
m1509001的专栏
10-25 925
chrome浏览器开发者工具devTool 源代码添加工作文件夹或替换项文件夹报：无法添加文件系统：
chrome浏览器调试线上文件映射本地文件
weixin_30321449的博客
10-24 599
通过ReRes让chrome拥有路径映射的autoResponse功能。 前端开发过程中，经常会有需要对远程环境调试的需求。比如，修改线上bug，开发环境不在本地等等。我们需要把远程css文件或者js映射到本地的文件上，通过修改本地文件进行调试和开发。通常我们可以通过以下方法来实现映射： 1.修改host文件——只能把域名映射到IP 2.使用Apache或者nginx搭建反向代理——...
web前端效率提升之浏览器与本地文件的映射-遁地龙卷风
liudanyang_21的博客
07-02 304
1.chrome浏览器，机制是拦截url，　　　 　　1.在浏览器Element中调节的css样式可以直接同步到本地文件，反之亦然，浏览器会重新加载css，省去刷新 　　2.在source面板下对js的编辑可以同步到本地文件，反之亦然，浏览器会重新加载js，比如一些基于事件调用的函数， 更改之后再次被触发可以立马看到效果，省去刷新 　　3.对html的修该浏览器不会重新加载　　更多的细节大家自行体会吧！2.设置方法 　　目录中要避免出现中文！ 　　我的版本是49，不同版本位置可能会有出入　　 　　已fil
使用Chrome Dev Tools, deb.js调试Javascript小技巧
目尽地平线
11-15 1744
本文讲介绍一些基于 Chrome Dev Tools 的实用的客户端Javascript 调试小技巧。我将重点关注那些无从下手，不知道该在哪儿添加断点的情景。
谷歌Search and Replace插件替换网页内容提交保存无效
mixzmx的博客
12-17 611
求助各位大佬，使用谷歌的Search and Replace插件替换网页内容提交保存无效，刷新了还是替换之前的内容大，试了各种解决办法也没有，然后找到一个和Search and Replacen类似的插件，但是不会使用，有会使用的方法朋友也可以留言一下，因为工作需要大批量替换，手动复制太慢了，如果有解决方法可以联系我有偿请教，用火狐或者Edge可以实现也行 !](https://img-blog.csdnimg.cn/20201217161725250.png?x-oss-process=image/wat
Chrome Devtools 高级调试指南（新）
前端劝退师
10-11 1149
前言本文暂未涉及Performance面板的内容。常用命令和调试黑盒脚本：Blackbox Script控制台内置指令远程调试WebView1. Chrome Devto...
Chrome Devtools 高级调试指南
墨鱼菜鸡
07-11 2852
From (Chrome Devtools 高级调试指南 )：https://juejin.cn/post/6844903961472974855 chrome devtools 设置黑色主题：https://blog.csdn.net/sinat_15347975/article/details/81151342 Chrome DevTools ...
在Chrome DevTools中调试JavaScript的实现
10-15
在Chrome DevTools中调试JavaScript是开发过程中不可或缺的技能，它能帮助开发者快速定位并修复代码中的错误。本文将深入探讨如何使用Chrome DevTools的Sources面板进行JavaScript调试。 首先，了解调试场景至关...
在 Chrome DevTools 中调试 JavaScript
01-08
在 Chrome DevTools 中调试 JavaScript 是一个非常重要的技能，它能帮助开发者快速定位并解决代码中的错误。本文将深入探讨如何利用 Chrome DevTools 进行有效的 JavaScript 调试。 首先，我们来了解一下“案发现场...
Vue DevTools调试工具的使用
11-27
- 修改`manifest.json`配置：在`vue-devtools/shells/chrome/manifest.json`文件中，找到`persistent`字段并将其值改为`true`。这样可以让Vue DevTools在浏览器关闭后仍保持状态，避免因浏览器重启而丢失设置。 - ...
chrome devtools.zip
08-01
Chrome DevTools 是一款强大的网页开发和调试工具，它内置于Google Chrome浏览器中，为开发者提供了丰富的功能，以帮助他们高效地构建、测试和优化Web应用。这个压缩包可能包含了关于Chrome DevTools的各种教程、...
【chrome支持】DevTools中重写覆盖源js文件
daban2008的专栏
11-11 675
sources面板下，左侧overrides标签下添加一个文件夹，并同意。勾选Enable Local overrides。然后在page标签下，修改文件后ctrl+s保存。直接就保存在overrides的文件夹下了。
Chrome Devtools之快捷键
笑笑学生
03-15 712
键盘快捷键参考
Chrome DevTools 使用指南- 控制台篇
最新发布
守城小轩的技术窝棚
05-19 1542
通过本指南的学习，您已经掌握了 Chrome DevTools 控制台的各种功能和使用技巧。从基础的日志输出到高级的格式化输出，再到对象和数组的展开与展示，控制台为前端开发者提供了强大的调试工具。无论是实时测试代码片段还是调试定位问题，控制台都能显著提升工作效率和代码质量。利用过滤器面板和工具栏，您可以快速找到关键信息，轻松管理日志输出。高级功能如字符串替换和深层对象展示，使您能更直观地理解复杂数据。掌握这些技巧后，您不仅能更快地解决问题，还能优化前端应用，提升用户体验。
解决chrome开发者工具无法修改js的问题
文本魔术
02-18 3089
检查一下是否开启了Pretty print，在这个选项开启的情况下，js源码是无法编辑的。把它关闭了，就可以了。
chrome64的Local Overrides
zgrbsbf的专栏
12-01 3232
这个功能就是为了对付在开发者工具中修改了东西后一刷新什么都没了的尴尬，这么操作： 以调试youku的代码为例： 在开发者工具中打开下面的面板： sources-->overrides-->setup overrides 选择完了本地的存放目录后还需要把下面的这个勾选上才能起作用 选择一个一个文件，然后修改一下，之后得按下ctrl+s
Chrome DevTools 调制js代码
06-08
Chrome DevTools 是一款常用的Web开发调试工具，它也可以用于调试机顶盒应用程序中的JavaScript代码。以下是具体步骤： 1. 连接机顶盒。使用开发工具连接到机顶盒，可以通过网络连接或者USB连接等方式。 2. 打开Chrome浏览器。确保您的Chrome浏览器版本与机顶盒中安装的Chrome版本一致，这样可以确保DevTools可以正常运行。 3. 打开DevTools。在Chrome浏览器中按下F12键或者右键选择“检查”选项，即可打开DevTools。 4. 选择“Remote Devices”选项卡。在DevTools中选择“Remote Devices”选项卡，可以看到已经连接的机顶盒设备。 5. 选择机顶盒应用程序。在“Remote Devices”选项卡中选择要调试的机顶盒应用程序。 6. 定位到JavaScript代码。在DevTools中选择“Sources”选项卡，可以看到应用程序中的JavaScript代码。可以使用搜索功能或者手动浏览查找要修改的JavaScript代码。 7. 修改JavaScript代码。在DevTools中对要修改的JavaScript代码进行修改，并保存修改后的文件。 8. 部署修改后的应用程序。将修改后的应用程序部署到机顶盒中，以便测试和运行。 需要注意的是，在调试和修改JavaScript代码时，应该遵循良好的编程习惯和安全规范，以避免对机顶盒的稳定性和安全性造成不良影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值