文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Devtools 老师傅养成 - Sources 面板

作者 Tomek Sułkowski 在 medium 的系列文章[4] Devtools脑图.png[5] Sources面板概览 Debug : 在源代码面板中可以设置断点来调试 JavaScript...在源代码添加debugger关键字 或者点击Sources面板中的源代码的行号 条件行断点：当满足条件时才会触发该断点 右击Sources面板中的源代码的行号 选择“Add conditional breakpoint...在源代码窗格右键，选择"BlackBox Script" 2. 在 Call Stack 中右键某一帧，选择"BlackBox Script" 3....在设置中的 Blackboxing 面板添加正则表达式匹配文件名 Workspace：Devtools as IDE 将更改持久化 在 sources 左侧的面板中选择Filesystem，点击Add...，Chrome 和 firefox 都内置了对 Source Map 的支持 在 Chorme devtools 中，settings -> preference -> sources 中，选中Enable

1.7K31

如何使用谷歌浏览器 Chrome 更好地调试

Console：可以通过控制台查看和运行 JavaScript 代码。 Sources：源代码可在此处获得。你可以调试 JavaScript 代码并添加断点等。 Network：调试网络相关的活动。...但是，这需要你手动进入源代码以添加这些调试器语句。Chrome 允许你直接从控制台执行此操作，而无需使用 debug() 函数访问你的源代码。...这意味着你可以在函数中某处暂停后立即重新运行前面的代码。 因此，你可以在当前调用堆栈中穿越时间（尽管在有限的范围内）。 注意：当你使用 Restart Frame Chrome 时，状态不会恢复。...Google Chrome DevTools 有一个代码片段功能，允许你保存代码片段，以便在需要时使用。片段是一段 JavaScript 源代码，你可以保存并重复使用以进行调试。...在 Chrome 中创建代码片段： 1.打开 DevTools 窗口并单击选项卡面板中的“Sources”。 2.单击>>符号，选择“snippets”，然后选择 New snippet。

3.5K30
您找到你想要的搜索结果了吗？
是的
没有找到

前端开发必备之Chrome开发者工具（上篇）

设备模式（device toolbar） 元素面板（Elements） 控制台面板（Console） 源代码面板（Sources） 网络面板（Network） 性能面板（Performance） 内存面板...快速预览媒体查询 点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式 查看关联的 CSS 右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义 元素面板（Elements）...会自动解析事件代码的框架或内容库封装部分，然后告诉您实际将事件绑定到代码中的位置 控制台面板（Console） 在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell 在页面上与 JavaScript...源代码面板（Sources） 在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器 格式化混淆代码 在某些情况下，我们需要对混淆的代码做一定的调试...当然你也可以在代码中使用 debugger 来设置代码行断点，效果和在 DevTools 中设置是一样的： console.log('a'); console.log('b'); debugger; console.log

8.2K111

使用浏览器这么多年，你真的了解DevTools吗？

二 Devtools 8个常用面板 1 Elements（元素） 使用Elements元素面板可以自由操作 DOM 和 CSS 来迭代布局和设计页面。查看网页所有元素的代码和属性。...检查和调整页面； 编辑样式； 编辑 DOM； 2 Console（控制台） 在开发期间，可以使用Console控制台面板记录诊断信息，查看JavaScript对象、查看调试日志信息或异常信息。...使用控制台面板； 命令行交互； 3 Sources（源代码） Sources也称之为资源，当前打开的网页页面所涉及到的所有源代码都会出现在该栏目，包括：样式、css、图片、js文件等。...在源代码面板中设置断点来试 JavaScript ，或者通过 Workspaces （工作区）连接本地文件来使用开发者工具的实时编辑器 断点调试； 调试混淆的代码； 使用开发者工具的 Workspaces...3 查看/编辑元素 点击Devtools的【箭头】（或者使用快捷键Ctrl+Shift+C）进入选择元素模式，在页面中选择需要查看的元素，就可以在开发者工具Elements标签处直接定位到该元素源代码的具体位置

98220

Chrome DevTools中的这些骚操作，你都知道吗？

如果您正在控制台调试一些JavaScript代码，并且需要引用先前的返回值，那么这可能非常方便。 重新发起xhr请求 ? 在平时和后端联调时，我们用的最多的可能就是Network面板了。...具体打开方式是：在Chrome DevTools中通过CMD/Ctrl + Shift + p打开命令菜单。然后输入Show Performance打开性能面板。...CSS/JS 覆盖率 ✅ Chrome DevTools 中的Coverage功能可以帮助我们查看代码的覆盖率。...在平常开发过程中，我们经常有些 JavaScript 的代码想在 Chrome Devtools中调试，直接在 console 下 写比较麻烦，或者我们经常有些代码片段(防抖、节流、获取地址栏参数等)想保存起来...其实也很简单： 点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式 右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义 keys/values ?

1.4K20

0202年了, Chrome DevTools 你还只会console.log吗 ?

DevTools 使开发者更加深入的了解浏览器内部以及他们编写的应用。通过使用 DevTools,可以更加高效的定位页面布局问题,设置 JavaScript 断点并且更好的理解代码优化。...控制台中直接访问页面元素 在元素面板选择一个元素,然后在控制台输入 $0,就会在控制台中得到刚才选中的元素。如果页面中已经包含了 jQuery,你也可以使用 $($0)来进行选择。...当你在元素面板选择一个元素或在分析器面板选择一个对象,记录都会存储在栈中。可以使用 $x来操作历史栈,x 是从 0 开始计数的,所以 $0 表示最近选择的元素, $4 表示最后选择的元素。 ?...重写 Overrides 在 Chrome DevTools 上调试 css 或 JavaScript 时,修改的属性值在重新刷新页面时,所有的修改都会被重置。...检查动画 Chrome DevTools 动画检查器有两个主要用途。 检查动画。您希望慢速播放、重播或检查动画组的源代码。 修改动画。您希望修改动画组的时间、延迟、持续时间或关键帧偏移。

1.2K20

现代 Web 应用 Devtools 调试技巧

这意味着 Chrome DevTools 的目标受众也在使用至少一个大型框架。Chrome DevTools 团队做了深入的考察。...下面我们来看几个最近出来的新特性： 开发部署视图 在以前，如果我们打开 Sources 面板并使用页面资源管理器来导航文件，可能看起来比较混乱。...img 去年，Chrome DevTools 引入了 Authored 和 Deployed 视图的概念，它们可以分别把开发视角的源代码文件以及部署视角的产物文件分类管理： img 我们只需在 DevTools...我们前面已经谈到了 Source Map，它让 Chrome DevTools 可以在我们编写的代码和发布的代码之间建立联系。...我们可以使用 Chrome DevTools记录器来记录我们的复现步骤，而且可以分享导出的录制。 img 我们可以打开 Recorder 面板，它就会记录当前打开页面上的操作。

27510

分享一些Chrome开发工具的用法

控制台中直接访问页面元素 在元素面板选择一个元素,然后在控制台输入$0,就会在控制台中得到刚才选中的元素。如果页面中已经包含了 jQuery,你也可以使用$($0)来进行选择。...当你在元素面板选择一个元素或在分析器面板选择一个对象,记录都会存储在栈中。 可以使用$x来操作历史栈,x 是从 0 开始计数的,所以$0 表示最近选择的元素,$4 表示最后选择的元素。 ? 4....在 JavaScript 脚本中调用 console.clear()。 使用快捷键 Cmd + K (Mac) Ctrl + L (Windows and Linux)。 ? clear 15....重写 Overrides 在 Chrome DevTools 上调试 css 或 JavaScript 时,修改的属性值在重新刷新页面时,所有的修改都会被重置。...检查动画 Chrome DevTools 动画检查器有两个主要用途。 检查动画。您希望慢速播放、重播或检查动画组的源代码。 修改动画。您希望修改动画组的时间、延迟、持续时间或关键帧偏移。

97020

JavaScript调试和优化，深入研究谷歌Chrome浏览器开发工具（二）

函数的完整调用堆栈显示在控制台中，带有代码文件名和行号，您可以单击它们导航到源代码中相应的行。 值得一提的是，console.trace()也可以与DevTools Snippets工具一起使用。...引用一个所选元素(Referencing A Selected Element) 如果您正在使用DevTools Elements面板，并且您已经选择了一些DOM元素，那么您可以在控制台面板中轻松地获得对它的引用...在生产环境中禁用/清理控制台输出 在开发中使用不同的控制台API是非常有用的，但是您可能不希望所有的日志信息出现在生产环境中，所以您可以使用工具来清理生产代码，或者使用这个简单的代码禁用控制台API:...它结合了旧的时间线和JavaScript CPU Profiler，它仍然存在，但是隐藏在更多的工具中——在它将从未来版本的Chrome中移除之前。...在本文中，我们介绍了Chrome DevTools，特别是控制台面板、API和性能相关工具。

2.6K40

如何使用浏览器工具调试PWA

你打开Chrome，严格按照我们的步骤走，不用在本地建立其他任何的东西。 模拟设备 首先设置Chrome开发者工具的『设备模拟』。这样你就可以在浏览器中模拟一个设备了。...在清单面板顶部，点击「manifest.json」链接，将会打开源码面板，包括了清单的所有代码。 ?...通过单击文件名，您可以使用内置的JavaScript调试器检查源代码并将其挂接到其中： ? 您最有可能使用的是Service Worker生命周期事件模拟。...像Chrome一样，当用Cache API使用被“开发工具”的“网络”面板中的Service Worker缓存的资源时，在Transferred列下列出了『Service Worker』： ?...浏览器，尤其是Chrome，可以为他们提供很好的工具。 Google还提供Lighthouse作为其浏览器工具的一部分，可以在Chrome DevTools中单独安装。

3.6K40

JavaScript 开发者需要了解的15个 DevTools 技巧

使用命令面板 Chrome 的 DevTools 提供了类似编辑器的命令面板。在任何 DevTools 面板中，按 Ctrl | Cmd + Shift + P，然后按名称搜索选项: ? 4....查找未使用的 JavaScript Chrome 的 Coverage 面板可以让你能够快速找到 JavaScript 有没有被使用。...首先，从 DevTools 菜单中的 More tools 子菜单中打开 Coverage 。重新加载页面，面板将用条形图显示未使用代码的百分比： ?...在 Chrome DevTools Sources 面板中，打开一个文件，右键单击代码中的某个位置，然后选择添加脚本以忽略列表。...它还将显示在 Overrides 选项卡和 localfiles 目录中。可以在 Chrome 中或使用任何代码编辑器来编辑文件，每当重新加载页面时，都将使用更新的版本。 14.

4.7K20

重新定义Chrome开发者工具

你可能在重复使用同样的几个面板--我知道我是这样的！但是，你知道吗？ 事实证明，在Chrome DevTools（以及其他基于Chromium的浏览器，如Edge）中，有超过30个（30个啊！）...那时，大部分的复杂性在于从你的服务器生成正确的HTML代码。浏览器的 "查看源代码 "功能足以调试奇怪的表格colspan问题。...以下是Chrome DevTools中引入新面板的快速和不完整（而且非常近似）的历史： 年份 面板 2008 控制台、元素、来源、网络、JavaScript分析器 2010 性能（当时称为时间线） 2013...但是在很长一段时间内，这往往会使软件变得更加复杂。而这很可能也在DevTools中起了作用。 在任何情况下，我们现在在这里，可能是任何应用平台所梦想的最先进的工具套件之一。...根据我在DevTools工作的经验，为了使代码库更容易工作而删除旧的/未维护的/很少使用的面板总是被证明是一个坏主意，特别是在没有足够的客户研究的情况下。

1.2K106

深入探索Chrome开发者工具：开发者的利器

本文就来给大家介绍一下Chrome开发者的使用。什么是Chrome开发者工具？Chrome开发者工具（DevTools）是Google Chrome浏览器中内置的一套网页开发和调试工具。...DevTools包含了元素检查、网络请求分析、性能监控、JavaScript调试等多种功能。如何打开Chrome开发者工具？...控制台（Console）面板控制台面板用于运行JavaScript代码和查看日志。主要功能有：执行JavaScript代码：你可以在控制台直接输入和执行JavaScript代码。...高级功能断点调试（Breakpoint Debugging）在Sources面板中，你可以设置断点来调试JavaScript代码。断点调试包括条件断点、XHR断点、事件监听断点等。...总结Chrome开发者工具是每个网页开发者必备的工具。它强大的功能和灵活的操作性可以大大提高开发和调试的效率。希望这篇文章能够帮助你更好地了解和使用DevTools，让你的开发工作更加得心应手。

8210

如何定位内存泄露

排查内存泄漏常见问题 在 JavaScript 中，当一些不再需要的数据仍然可达时，V8 会认为这些数据仍在被使用，不会释放内存。...使用 Chrome DevTools 定位内存泄漏 Performance [image.png] 打开准备分析的页面和 DevTools 的 Performance 面板，勾选 Memory 并开始录制...，在模拟用户操作一段时间后结束录制，DevTools 会将这段时间内的页面行为活动进行记录和分析。...按需选取时间线中的区域片段，检查对应时间段内的活动类型和时间占用，作为排查和定位内存泄漏的辅助办法。...上面的图中使用 filter 检查快照 2 和快照 3 的差异，通过结果可知在两个快照之间持续被分配 clickCallback 闭包。通过点击文件路径可以定位到内存泄漏的代码。

2.1K00

使用Firefox开发工具做性能审计

您可以以不同的方式访问DevTools设置面板: 首先打开DevTools，然后: 单击工具栏中的设置按钮 按F1显示设置面板上的任何当前工具 按Ctrl+Shift+O (Windows和Linux)...Waiting 是在接收到第一个字节之前，客户机等待的总时间。在其他性能分析工具如WebPageTest.org或Chrome的DevTools中，这被称为TTFB或时间到第一个字节。...(用于多线程JavaScript的标准API)，您也可以在其他线程中运行代码。...您可以查找并检测使用性能工具阻塞单个线程的长时间运行的代码片段。 怎么使用性能工具 使用性能工具的步骤非常简单: 打开您的web页面，打开性能面板，然后开始记录性能。...对于JavaScript，您需要关注函数调用、解析HTML和解析XML。 结论 在本文中，我们已经了解了如何开始使用Firefox的DevTools，以及如何使用不同的性能相关子工具。

3.4K40

使用 Chrome DevTools 调试 JavaScript

您可能会试图随意使用 console.log() 来调试代码使代码正常工作。 不要再这样了。 这篇文章将讲述正确调试的方法！ 您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。...这是更有效的在代码中查找和修复 bug 的方法。 本教程将向您展示如何调试一个具体 bug，您学到的方法将有助于您调试以后遇到的的 JavaScript 错误。...您可以在 Watch 表达式中存储任何有效的 JavaScript 表达式。 现在就试试： 在 Sources 面板, 点击 Watch。 点击 Add Expression 按钮 。...可以使用控制台来评估任意的 JavaScript 语句。 开发人员通常使用控制台在调试时覆盖变量值。 在您的情况下，控制台可以帮助找到啊修复 bug 的方法。...您不需要离开 DevTools 来修复 bug。 您可以直接在 DevTools UI 中编辑 JavaScript 代码。

2.3K70

Chrome DevTools开发者工具

Chrome DevTools是内嵌在Chrome浏览器里的一组用于网页制作和调试的工具。使用DevTools，可以在平时中的开发调试中极大的提高效率。...使用快捷键ctrl+shift+i或者f12可以直接打开开发者工具。 在DevTools开发者工具一共有九个部分。 ? Element ?...在这张图中，右边的开发者工具分为两部分，左边为HTML代码，右边是CSS代码以及样式。 1、最基本的使用就是快速定位到DOM节点在网页中的位置，或者DOM节点在在HTML代码中的位置。...5、在HTML代码中，右键元素，可以对改元素进行操作。 ? 6、ctrl+f搜索，可以在网页上搜索内容，也可以在HTML中搜索。 Console 在控制台能显示浏览器的消息。...可以在控制台执行代码段。 Sources 这里是源代码面板。 ? 1、可以在每一行代码中设置断点调试代码。 2、这里可以查看网页的源代码文件，在下边有一个{}图标，点击以后可以格式化代码。 ?

1.1K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券