利用f12开发者工具在线调试网站js

简介: 利用f12开发者工具在线调试网站js

在很多时候,我们可能需要调试前端的js,但是如果非本地项目,根本没法直接修改js进行调试,但是我们可以利用浏览器的开发者工具,进行修改js并调试

首先我们随便找一个网站: https://www.easyswoole.com/Preface/intro.html

打开f12,点击sources,点击overrides:

image.png

点击 select folder for overrides ,选择一个本机的文件夹做浏览器的文件映射:

将会弹出允许获得文件访问权限的弹窗,点击确认

image.png

将显示:

image.png

在soures中找到你需要修改的js文件:

image.png

由于很多代码都会进行压缩,所以我们可以先点击上面的prety-print进行格式化:

image.png

将格式化的代码全选复制,复制到原有js中:

image.png

现在,我们加点自己的东西,比如console.log("仙士可牛逼");

image.png

点击ctrl+s或者右键菜单保存:

image.png

直接刷新页面,浏览器将从本地加载此js文件:

image.png

目录
相关文章
|
1月前
|
JavaScript 前端开发 UED
网站内容禁止复制的js代码
【10月更文挑战第2天】
|
2月前
|
JavaScript
网站内容禁止复制的js代码
网站内容禁止复制的js代码
|
3月前
|
JavaScript 前端开发 开发者
Chrom devtools JS调试、性能优化与必备功能
Chrom devtools JS调试、性能优化与必备功能
|
2月前
|
Web App开发 JavaScript 前端开发
JavaScript 调试
JavaScript 调试
17 0
|
3月前
|
存储 JSON 监控
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
270 1
|
2月前
|
Web App开发 JavaScript 前端开发
JavaScript基础知识-使用Firefox进行代码的调试(Debug)
关于如何使用Firefox浏览器进行JavaScript代码调试的基础知识介绍。
80 0
|
3月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
3月前
|
JavaScript 开发者 UED
Vue.js 错误处理与调试:跟上技术潮流,摆脱开发困扰,成为代码大神不是梦!
【8月更文挑战第30天】在 Vue.js 开发中,错误处理与调试至关重要。本文将对比 Vue 的全局错误捕获机制 `Vue.config.errorHandler` 和组件内 `watch` 监听数据变化的方式,并介绍 Vue 开发者工具、控制台打印 (`console.log`) 以及代码断点 (`debugger`) 等调试方法。此外,还将探讨如何通过自定义错误页面提升用户体验。通过这些技巧的对比,帮助开发者灵活选择适合的策略,确保应用稳定性和开发效率。
51 0
|
3月前
|
JavaScript 前端开发 C++
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
|
3月前
|
Web App开发 JavaScript 前端开发
IDEA——使用JavaScript Debugger调试代码
IDEA——使用JavaScript Debugger调试代码
30 0