Chrome 开发者工具的 sources 面板中的 Show ignore-listed frames 开关

简介: Chrome 开发者工具的 sources 面板中的 Show ignore-listed frames 开关

在 Chrome 开发者工具sources 面板中,Call stack 部分有一个名为 Show ignore-listed frames 的复选框,这个功能对于 JavaScript 开发者来说非常有用,尤其是在进行复杂的代码调试时。接下来,我将详细解释这个功能的作用、重要性以及何时使用它。


Show ignore-listed frames 功能介绍

定义和作用

在 JavaScript 的调试过程中,Call stack 显示了在触发当前断点时,函数调用的层级关系。这个堆栈可以追踪到每个函数被调用的源头,帮助开发者理解当前执行的代码的上下文。然而,在一些情况下,堆栈中会包含很多由框架、库或者其他辅助代码生成的调用,这些信息可能会干扰开发者分析应用程序中自己编写的代码部分。


Show ignore-listed frames 的作用是允许开发者从 Call stack 中隐藏那些他们选择忽略的框架或库生成的调用帧。当此选项被禁用(即不显示忽略列表中的帧)时,调用堆栈会简化,只显示那些对当前调试更为关键的部分。


使用效益

使用这一功能的主要好处是提高调试效率。它可以帮助开发者更快地定位问题,特别是在使用了大量第三方库和框架的大型项目中。通过隐藏不需要关注的帧,可以更清楚地看到业务逻辑中的函数调用顺序和方法执行过程。


使用场景分析

调试复杂应用

在开发复杂的 Web 应用时,经常会引入诸如 React、Vue、Angular 这样的前端框架,以及可能的各种中间件和工具库。这些库和框架的调用通常不是当前调试焦点,因此隐藏这些调用可以让开发者集中注意力在自己的业务逻辑上。


性能分析

当进行性能优化时,理解应用中哪些函数调用最频繁以及执行时间最长通常非常重要。在这种情况下,开发者可能会希望忽略那些经常出现但对当前性能分析影响不大的库函数调用,专注于可能存在性能问题的业务代码。


错误追踪

在错误追踪时,如果错误是由第三方库内部抛出,而你需要确认是库的使用方式问题还是库本身的问题,使用 Show ignore-listed frames 功能可以帮助快速切换视角,查看或隐藏第三方库的内部调用。


结合实践的建议

为了充分利用 Show ignore-listed frames 功能,建议开发者:

  • 熟悉调试工具:深入了解 Chrome 开发者工具的各项功能,不仅限于 Call stack,还包括 BreakpointsWatchScope 等,可以更全面地支持调试。
  • 定制忽略列表:根据项目使用的技术栈,定制忽略列表。例如,如果使用了大量的工具函数库如 Lodash,可能会选择忽略这些库的内部实现,以便更专注于应用逻辑。
  • 切换视角:在调试不同类型的问题时,根据需要开启或关闭 Show ignore-listed frames。例如,在确定问题确实由第三方库引起时,应重新显示这些帧以深入分析。


通过合理利用 Show ignore-listed frames,可以显著提升调试的效率和效果。虽然它是一个相对较小的工具,但在处理复杂的 JavaScript 应用时,它提供的帮助是不可小觑的。


这些 frames,可以允许开发人员去配置吗?请举例说明。你的回复不能少于 3800 个字。你的回复必须满足以下这三点要求:

第一点是你的回复文本里,中文和英文字符之间要留一个空格。

第二点是你的回复文本里,所有成对匹配的英文双引号 " 必须替换为另一个特殊符号 `。

第三点是你的回复文本里,不要用“首先”,“其次”,“还有”,“总的来说”这种结构来回答,因为看起来很机械。

相关文章
|
13天前
|
Web App开发 存储 前端开发
深入探索Chrome开发者工具:开发者的利器
Chrome DevTools是Chrome浏览器内置的网页开发与调试神器,包含元素检查、网络请求分析、性能监控和JavaScript调试等功能。可通过快捷键F12或菜单打开。主要面板有:Elements(查看编辑HTML/CSS),Console(运行JS代码及查看日志),Network(分析网络请求),Performance(优化网页性能)和Application(管理应用数据)。高级功能包括断点调试、网络限速和屏幕模拟,助力高效开发和调试。
22 0
|
1月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
46 0
|
1月前
|
Web App开发 前端开发 JavaScript
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
|
1月前
|
Web App开发 缓存 JavaScript
Chrome 开发者工具 Request content was evicted from inspector cache
Chrome 开发者工具 Request content was evicted from inspector cache
|
1月前
|
Web App开发 存储 缓存
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
|
1月前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
|
1月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
|
1月前
|
Web App开发 前端开发 JavaScript
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
|
1月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
90 0
|
1月前
|
Web App开发 JavaScript 前端开发
从零开始,轻松打造个人化Chrome浏览器插件
从零开始,轻松打造个人化Chrome浏览器插件
103 0