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

最新推荐文章于 2023-08-03 09:46:11 发布

孙瑞宇

最新推荐文章于 2023-08-03 09:46:11 发布

阅读量343

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yasmi/p/5523976.html

本文介绍了在Chrome浏览器中调试异步加载JavaScript的方法，包括在script头部或尾部添加//@sourceURL指令以便在控制台中查找及调试，以及将异步加载更改为同步加载的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们常常利用chrome强大的控制台Sources下面进行代码断点调试，但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到，那如何进行debug断点调试呢？

方案一：在script代码的头部或者尾部加上//@ sourceURL=xxx.js，然后在(no domain)里面找到它进行调试,如果使用firefox浏览器，直接在debug中就可以找到xxx.js

方案二：将js的异步加载换成为同步加载

第一种方案非常方便。

转载于:https://www.cnblogs.com/yasmi/p/5523976.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

孙瑞宇

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

调试异步加载页面中的 JavaScript 文件：JavaScript 调试技巧

TechNovaX的博客

10-10

305

通过这些工具，你可以检查异步加载的 JavaScript 文件、设置断点、查看变量的值，并逐步执行代码来进行调试。本文将介绍一些实用的 JavaScript 调试技巧，帮助你解决异步加载页面中的 JavaScript 文件的问题。通过使用开发者工具、调试语句、事件监听器、延迟加载和模拟数据，你可以更轻松地解决异步加载 JavaScript 文件的问题，并加快调试和开发的效率。使用模拟数据：在调试过程中，如果异步加载的 JavaScript 文件依赖于服务器返回的数据，你可以使用模拟数据来进行调试。

轻松掌控前端错误：浏览器断点调试的实用技巧

ztK63LrD的博客

12-07

2273

无论是跟踪JavaScript错误还是优化页面性能，掌握浏览器的断点调试技巧都能让你轻松解决开发中的难题，本文将带你深入探索这些技巧，让你从头痛的调试过程转变为得心应手的开发体验。

参与评论您还未登录，请先登录后发表或查看评论

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

10-21

chrome浏览器不仅仅可以用来上网，对于开发人员来说，它更像是一款强大的开发辅助工具。今天这篇文章给大家分享在chrome浏览器如何断点调试异步加载的JS，有需要的可以参考借鉴。

如何调试异步加载的js文件

weixin_34345560的博客

04-21

135

转自：http://blog.youkuaiyun.com/bruce128/article/details/40615233 最近在一个新的web项目中开发功能。这个项目的管理界面有一个特点，框架是固定的，不会刷新，每次点新的页面仅仅刷新一个div。div里面不是套的iframe，于是导致了一个问题，用浏览器无法调试异步加载页面里包含的js文件。简单的说就是在调试工具里面看不到异步加...

浏览器调试异步加载的js

qq_27699835的博客

04-18

299

只需在js 标签<script>中加入：//# sourceURL=${path}/role/manager（role/manager为随机去的名字）那么就可以在debugger中调试异步加载的脚步

如何调试异步加载页面里包含的js文件

10-25

由于浏览器的默认调试工具可能不直接显示这些异步加载的JS文件，使得调试变得困难。本文将探讨如何解决这一问题。首先，我们需要理解为什么浏览器的调试工具不能直接显示异步加载的JS文件。这是因为在HTML文档解析...

异步加载js方法

weixin_40679578的博客

02-28

421

我们想异步加载一些js，如果请求接口判断后选择加载不同的sdk这类的需求，实现起来也很简单。 /* eslint-disable / /* 异步加载脚本 @param url 脚本地址 @param onloaded 加载完成的回调 */ export const loadScript = (url) => { return new Promise((resolve) => { let script = document.createElement(‘script’) script.src =

chrome扩展程序开发/chrome运行本地JS脚本

11-04

chrome扩展程序开发/chrome运行本地JS脚本的方法例子

Chrome之js断点调试方法

Mr_box_的博客

12-05

2525

方法/步骤 1.Chrome开发者工具断点调试第一步:打开开发者工具，按F12或者在浏览器页面上右键选择经常第二步:在Source面板找到需要调试的文件第三步:设置断点第四步:触发调试部分程序的运行，开始调试调用过程常用的按钮及快捷键: 跳到下一个断点:点击Sources面板右侧的 “三角按钮” 快捷键： F8 跳到下一步 : 点击Sources面板右侧的第二个按钮快捷键 : F10 跳进断点处的方法中:点击Sources面板右侧第三个按钮快捷键 : F11 跳进

关于在chrome中调试异步加载的javascript文件

总长

11-09

486

异步加载javascript 在js文件开头添加 //@ sourceURL=XXXXX.js

关于网站使用异步请求以后浏览器源码查看不到数据导致百度抓取不到的问题解决方案...

weixin_33901641的博客

06-30

542

起初，也因为这个问题钻入了错误的漩涡中，比如js代码写在head里面，获取的数据用隐藏文本存放等等，试过以后都是不行的，后面甚至想到了改项目架构，但是自己都认为感觉有点不实际，改动那不是一般的大，对于在代码基本敲完只做优化的前提下任何人都是无法接受的，然后自己就琢磨怎么实现让网页源码能看到数据，后面就去比对网站，一般的网站想实现网页源码能看到数据肯定是要动态装载的，所有我想到了一个办法，而且特别简...

谷歌（Chrome）浏览器开发者模式抓不到包怎么处理？

mydreamww的博客

08-03

1834

浏览器开发者模式抓包~ 抓到了么？抓到了！

JS异步加载及解决方式

qq_43955202的博客

05-28

5147

1.js中的同步加载和异步加载有什么不同？ javascript语言是单线程机制。所谓单线程就是按次序执行，执行完一个任务再执行下一个。对于浏览器来说，也就是无法在渲染页面的同时执行代码。同步加载：也就是说一个事件处理程序没加载完之前，不会加载后面的程序。 异步加载：也就是并发加载，会同时处理几个事件处理程序。举个生活中的例子：早上起床,先刷牙,再烧水,等水烧开了洗脸,再整理发型.是同步 ...

使用 Chrome 开发工具调试异步 JavaScript（Debugging Asynchronous JavaScript with Chrome DevTools）

太阳火神的美丽人生

05-29

6496

使用 Chrome 开发工具调试异步 JavaScript（Debugging Asynchronous JavaScript with Chrome DevTools）

c#爬虫-使用ChromeDriver 所见即所得

dotNET跨平台

06-14

1276

问题最近在做爬虫的时候发现很多网页都是浏览器看得见，但是源文件是看不到的，也就是所谓的异步加载。这时候如果我们需要那些异步内容，要么是了解他的规则，进行条件的组合进而再次进行http请求，...

用Selenium+Chromedriver来爬取Ajax异步请求数据

Python 代码侠

07-31

3204

用Selenium+Chromedriver来爬取Ajax异步请求数据 Selenium是一个Web的自动化测试工具，最初是为网站自动化测试而开发的，类型像我们玩游戏用的按键精灵，可以按指定的命令自动操作，不同是Selenium 可以直接运行在浏览器上，它支持所有主流的浏览器（包括PhantomJS这些无界面的浏览器）。 Selenium 可以根据我们的指令，让浏览器自动加载页面，获取需要...

如何在 Vue 开发中有效使用 Chrome DevTools 进行调试？

最新发布

08-02

<think>我们正在回答用户关于如何在Vue开发中有效使用Chrome DevTools进行调试的问题。根据用户提供的引用内容，我们可以整合出以下关键点： 1. **安装Vue Devtools插件**：这是专门为Vue.js设计的调试工具，可以查看组件树、状态、事件等（引用[1][4][5]）。 2. **使用Chrome DevTools的一般功能**：包括元素检查、网络请求分析、性能监控等（引用[2]）。 3. **解决调试环境问题**：例如确保在调试时能够使用Vue Devtools，避免因浏览器实例无法持久化cookie或插件无法使用而造成的阻碍（引用[3]）。接下来，我们将详细说明如何高效使用这些工具。 ### 在Vue开发中高效使用Chrome DevTools进行调试的步骤 #### 1. **安装并启用Vue.js Devtools插件** - 从Chrome网上应用店安装[Vue.js Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)（引用[1][4]）。 - 安装后，在Chrome开发者工具（按F12打开）中会看到“Vue”标签页（引用[1]）。 - **注意**：如果调试时无法使用Vue Devtools，检查是否因浏览器实例无法持久化插件（引用[3]）。可尝试修改插件的`manifest.json`（如将`persistent`设置为`true`）（引用[4]）。 #### 2. **组件树和状态检查** - 在“Vue”标签页中，可以查看整个组件层次结构（组件树），选择组件后，右侧面板显示其`data`、`props`、`computed`等属性（引用[1][5]）。 - **实时编辑**：直接修改组件的`data`或`props`，观察UI的实时更新，便于调试状态变化（引用[1]）。 - **过滤组件**：在组件树顶部的搜索框中输入组件名，快速定位组件。 #### 3. **事件跟踪** - 在“Events”子标签页中，监控组件触发的自定义事件（如`this.$emit('my-event')`），查看事件名、参数和触发组件（引用[1]）。 - 用于调试跨组件通信（如父子组件通过事件传递数据）。 #### 4. **Vuex状态管理调试** - 如果项目使用Vuex，在“Vuex”标签页中查看状态（state）、变化（mutations）和操作（actions）（引用[5]）。 - **时间旅行调试**：回退或重放mutation，观察状态变化对UI的影响（引用[1]）。 - 设置`Atuoload Vuex state`（自动加载Vuex状态）以保持状态同步（引用[5]）。 #### 5. **性能分析** - 使用Chrome DevTools的“Performance”标签页记录Vue应用的运行时性能： 1. 点击“Record”按钮开始记录。 2. 执行用户操作（如点击按钮、切换路由）。 3. 停止记录，分析火焰图，找出渲染耗时长的组件（引用[2]）。 - **内存泄漏检测**：在“Memory”标签页中拍摄堆快照，比较操作前后的内存占用，定位未释放的组件（引用[2]）。 #### 6. **网络请求监控** - 在“Network”标签页中查看API请求的详情（URL、参数、响应时间、状态码）（引用[2]）。 - 过滤XHR请求，分析Vue组件中`axios`或`fetch`调用的性能。 #### 7. **源代码调试（Source Tab）** - 在“Sources”标签页中： - 找到Vue组件的源代码（可能位于`webpack://`目录下）。 - 设置断点，调试`methods`、`computed`或生命周期钩子函数（引用[2]）。 - 使用`debugger`语句在代码中触发断点（适用于异步操作）。 #### 8. **解决常见调试问题** - **Vue Devtools不显示**：确保使用的是开发版Vue（生产模式会禁用Devtools），检查浏览器插件是否启用（引用[1][5]）。 - **组件更新异常**：在“Vue”标签页中勾选“Highlight updates”，高亮显示重新渲染的组件（引用[1]）。 - **状态未同步**：检查Vuex的mutation是否正确提交，或使用`Vue.set`确保响应式更新。 #### 9. **小技巧** - **快捷键**：`Ctrl+Shift+C`（或`Cmd+Shift+C`）快速打开元素检查器。 - **保存记录**：在DevTools设置中开启“Preserve log”保留网络请求日志（引用[2]）。 - **移动端调试**：通过`chrome://inspect`调试手机上的Vue应用（需USB连接）。 ### 示例：调试一个Vue组件假设有一个显示用户信息的组件`UserProfile`，但`user.name`未正确显示。 1. 打开DevTools的“Vue”标签页，找到`UserProfile`组件。 2. 检查其`data`或`props`中的`user`对象： - 如果`user`为`null`，则初始化问题。 - 如果`user`有值但无`name`属性，检查API返回数据。 3. 在“Network”标签页确认API返回的数据结构。 4. 在“Sources”标签页的`mounted`钩子中设置断点，单步执行数据加载逻辑。通过上述步骤，可高效定位问题。 §§相关问题§§ 1. 如何解决Vue Devtools在Chrome中不显示的问题？ 2. Vuex状态管理有哪些最佳实践？ 3. 如何优化Vue组件的渲染性能？ [^1]: Chrome插件：Vue.js Devtools 高效地开发和调试。Vue.js Devtools是一个Chrome DevTools扩展，专门用于调试Vue.js应用。安装这个扩展后，你会在Chrome开发者工具中看到一个新的标签“Vue”，通过它可以直观地查看和操作Vue.js组件，极大地提升了调试效率。 [^2]: Chrome Devtools调试技巧。Chrome DevTools 是开发者用于调试 Web 应用程序、分析性能、检查元素和网络请求的重要工具。无论是前端开发人员还是后端工程师，熟练掌握 Chrome DevTools 都能显著提高开发效率和调试精度。通过 DevTools，我们可以快速识别并解决性能瓶颈、修复 bug、优化用户体验。 [^3]: Chrome DevTools浏览器开发者模式、Vue DevTools、vs和DevTools调试、插件。因为调试时打开的浏览器实例可能会无法持久化cookie、无法使用Vue、React的devtool，可能会造成一些阻碍 devtool调试：react、vue等有devtool插件的框架。 [^4]: chrome插件开发实例07- Vue调试插件vue-devtools。1、克隆：git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git 2、修改mainifest.json 中的persistant为true。 [^5]: Chrome(Google) 浏览器使用vue Devtools调试。Theme: 主题。 Time Format -> Display milliseconds: 时间格式显示到毫秒，目前未看到在哪体现。 Atuoload Vuex state: 是否自动加载vuex state，目前未看到效果。</think>### 在 Vue 开发中高效使用 Chrome DevTools 的调试指南 #### 1. **安装并配置 Vue Devtools 插件 [^1][^4][^5]** - 从 Chrome 商店安装 [Vue.js Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools) - **关键配置**： - 修改 `manifest.json` 设置 `"persistent": true` 确保插件持久化[^4] - 启用 `Auto-load Vuex state` 自动加载状态管理数据[^5] - 开启 `Display milliseconds` 精确调试异步操作时间[^5] - 验证：打开开发者工具（F12），应出现 **Vue** 和 **Vuex** 标签页 #### 2. **组件树调试（Components Tab）** ```javascript // 示例：调试组件层级关系 export default { components: { ChildComponent: () => import('./Child.vue') } } ``` - 在 **Vue > Components** 标签页中： 1. 查看组件树形结构，定位父子关系 2. 选中组件后，右侧面板显示： - `data`：实时修改响应式数据 - `props`：检查传入属性值 - `events`：跟踪自定义事件($emit) 3. 使用 **🔍 搜索框** 快速定位组件 #### 3. **Vuex 状态调试 [^5]** ```javascript // store.js export default new Vuex.Store({ state: { user: null }, mutations: { SET_USER(state, payload) { state.user = payload // 在此处设置断点 } } }) ``` - 在 **Vuex** 标签页中： - 查看完整状态树 - 监控 `mutations` 执行记录（含参数和时间戳） - 使用 **时间旅行调试**：回滚到任意 mutation 状态 - 在代码中设置断点，跟踪状态变更过程 #### 4. **性能分析与优化** ```javascript // 性能关键组件示例 export default { computed: { expensiveList() { return largeArray.filter(...) // 可能引起性能问题 } } } ``` - **Performance 标签页**： 1. 点击 ⚫ 录制按钮 2. 执行用户操作（如列表滚动） 3. 分析火焰图中 **Update Components** 耗时 - **Vue Performance 设置**： - 启用 `Highlight updates` 高亮重渲染组件 - 开启 `Component render timing` 查看渲染耗时 #### 5. **网络请求调试** ```javascript // API请求示例 methods: { async fetchData() { const res = await axios.get('/api/data') // 在此处设置断点 this.data = res.data } } ``` - **Network 标签页**： - 过滤 XHR 请求，查看请求/响应详情 - 使用 **Copy as cURL** 快速复现请求 - 配合 **Source 标签页**： 1. 在异步请求处设置断点 2. 使用 `Scope` 面板检查当前作用域变量 #### 6. **高级调试技巧** - **实时编辑**： - 在 `data` 面板直接修改值，立即观察 UI 变化 - 在 `computed` 面板重写计算逻辑（临时调试） - **组件定位**： - 点击元素检查器中的 **📋 Vue 图标** - 自动跳转到 Components 面板对应组件 - **移动端调试**： - 使用 `chrome://inspect` 调试手机上的 Vue 应用 - 确保 USB 调试模式开启[^3] #### 7. **常见问题解决 [^3]** - **插件不显示**： - 检查 Vue 是否为开发模式（生产模式禁用 DevTools） - 确保在 `manifest.json` 设置了 `"persistent": true`[^4] - **Cookie/状态丢失**： - 使用 `--user-data-dir` 参数启动浏览器保留会话 ```bash chrome.exe --user-data-dir=C:/temp-chrome-profile ``` > **最佳实践**：调试时始终打开 **Preserve log**（网络面板）和 **Disable cache**（网络面板），避免干扰调试过程[^2]。