利用f12开发者工具在线调试网站js
【摘要】 在很多时候,我们可能需要调试前端的js,但是如果非本地项目,根本没法直接修改js进行调试,但是我们可以利用浏览器的开发者工具,进行修改js并调试 首先我们随便找一个网站: https://www.easyswoole.com/Preface/intro.html打开f12,点击sources,点击overrides:点击 select folder for overrides ,选择一个本机...
在很多时候,我们可能需要调试前端的js,但是如果非本地项目,根本没法直接修改js进行调试,但是我们可以利用浏览器的开发者工具,进行修改js并调试
首先我们随便找一个网站: https://www.easyswoole.com/Preface/intro.html
打开f12,点击sources,点击overrides:
![](https://ask.qcloudimg.com/http-save/yehe-1073733/4tlvd4gphy.png?imageView2/2/w/1200)
点击 select folder for overrides ,选择一个本机的文件夹做浏览器的文件映射:
将会弹出允许获得文件访问权限的弹窗,点击确认
![](https://ask.qcloudimg.com/http-save/yehe-1073733/bybmwc3xen.png?imageView2/2/w/1200)
将显示:
![](https://ask.qcloudimg.com/http-save/yehe-1073733/8sedvwesgj.png?imageView2/2/w/1200)
在soures中找到你需要修改的js文件:
![](https://ask.qcloudimg.com/http-save/yehe-1073733/avtx72di9q.png?imageView2/2/w/1200)
由于很多代码都会进行压缩,所以我们可以先点击上面的prety-print进行格式化:
![](https://ask.qcloudimg.com/http-save/yehe-1073733/t7a9ifplql.png?imageView2/2/w/1200)
将格式化的代码全选复制,复制到原有js中:
![](https://ask.qcloudimg.com/http-save/yehe-1073733/w8nzz44n5u.png?imageView2/2/w/1200)
现在,我们加点自己的东西,比如console.log("仙士可牛逼");
![](https://ask.qcloudimg.com/http-save/yehe-1073733/qswvq1i30f.png?imageView2/2/w/1200)
点击ctrl+s或者右键菜单保存:
![](https://ask.qcloudimg.com/http-save/yehe-1073733/o1j0wt2sjn.png?imageView2/2/w/1200)
直接刷新页面,浏览器将从本地加载此js文件:
![](https://ask.qcloudimg.com/http-save/yehe-1073733/3zuwxv59gp.png?imageView2/2/w/1200)
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)