首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Google Chrome Devtools的debugger:/VM*文件中访问和搜索代码

在Google Chrome DevTools的Debugger面板中,可以通过以下步骤访问和搜索代码:

  1. 打开Google Chrome浏览器,并在地址栏中输入要调试的网页地址。
  2. 按下F12键或右键点击页面,选择"检查"选项打开开发者工具。
  3. 在开发者工具中,切换到"Debugger"面板。
  4. 在左侧的文件列表中,可以看到网页中加载的所有JavaScript文件。
  5. 找到你想要访问和搜索代码的文件,点击打开该文件。
  6. 在打开的文件中,你可以查看和编辑代码。
  7. 如果你想搜索特定的代码,可以使用右上角的搜索框。输入关键字,DevTools将会高亮显示匹配的代码。

需要注意的是,Debugger面板中的文件路径可能以"debugger:/VM"开头,这是由于Chrome DevTools对于动态生成的代码或内联脚本会使用虚拟文件路径。这些虚拟文件路径通常以"debugger:/VM"开头,后面的数字可能会有所不同。

对于Chrome DevTools的更多详细信息和使用方法,你可以参考腾讯云的产品文档:Chrome DevTools 使用指南

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

前言 Chrome 开发者工具(简称 DevTools)是一套 Web 开发调试工具,内嵌于 Google Chrome 浏览器。...访问最近控制台结果 在控制台输入 $_可以获控制台最近一次输出结果。 ? _ 3. 访问最近选择元素对象 控制台会存储最近 5 个被选择元素对象。...使用 debugger 关键词,我们可以直接在源码定义断点,方便很多。 ? debugger 17....工作区编辑文件 Edit Files With Workspaces 工作空间使您能够将在 Chrome Devtools 中进行更改保存到计算机上相同文件本地副本。...+ R 在当前文件或面板搜索文本 Ctrl + F Cmd + F 在所有源搜索文本 Ctrl + Shift + F Cmd + Opt + F 按文件搜索(除了在 Timeline 上) Ctrl

1.2K20

Puppeteer 入门指引

熟悉爬虫或者 UI 自动化同学可能会联想到 PhantomJS、CasperJS 或者 Selenium,而作为 Chrome DevTools 团队亲自出品维护 puppeteer 不管是在功能完整性...示例 4 - 自动填充表单并提交(在 https://developers.google.com 页面搜索输入关键词 Headless Chrome搜索) 创建 search.js const.../web/"); // 在搜索输入关键词 await page.type(".devsite-search-field", "Headless Chrome"); // 按Enter键...在浏览器执行代码中使用 debugger 目前有两种执行上下文:运行测试代码 node.js 上下文运行被测试代码浏览器上下文,我们可以使用 page.evaluate() 在浏览器上下文中插入...debugger 进行调试: 首先在启动 puppeteer 时候设置 {devtools: true}: 然后在 evaluate() 执行代码插入 debugger,这样 Chromium 在执行到这一步时候会停止

1.5K50

在 ts + Jest 单元测试 debugging

温馨提示:因微信中外链都无法点击,请通过文末 “阅读原文” 到技术博客完整查阅版; 本文简要介绍了如何在 Jest 单元测试利用 Chrome Node DevTools 来辅助调试 1、背景 代码是...Chrome Node DevTools 刚开始我用 VSCode Debugger 功能,在 TS 源码进行 debugger 时候,发现在源码上打断点无法准确定位: ?...在 devtool 中进行 debugger 3、总结 如果功能代码是 js 写,推荐直接用 VSCode 提供 Debugger 功能来调试会比较方便(具体设置请看下方 ”参考文章“); 如果代码是...Jest:简要总结了用 Chrome 调试 VSCode 调试,本文所用 Chrome 调试 就是通过这篇文章学会 debugging-jest-tests:微软官方仓库给出 VScode ...launch.json 配置项教程,涵盖了 debug 全部测试文件 debug 单个测试文件 这两种场景,足够了 Debugging TypeScript Jest Tests With Visual

3.9K30

前端工程师生产环境 debugger 技巧

这种低效方式,chrome devTools 还提供了 network search 面板这种更便捷方式,可以搜索接口详细信息(包括详细返回信息),返回匹配结果。...如何快速定位到问题相关代码 global search ,全局搜素关键字,再定位到关键代码 chrome devTools global search 是一个非常实用一个功能,当你不知道需要调试代码在哪个文件时...关联上 sourceMap 后,我们就可以看到 sources -> page 面板上变化了 如何在 chrome 修改代码并调试?...开发环境,我们可以直接在 IDE 修改代码代码变更就直接更新到了浏览器中了。那么生产环境,我们可以直接在 chrome 修改代码,然后立马看代码修改后效果吗?...当然,你想要 chrome devTools 都有。chrome devTools 提供了 local overrides 能力。 local overrides 如何工作

1.2K40

移动端调试技巧与工具:构建无缝开发体验

// 示例代码:在Chrome启用远程调试Android设备 chrome://inspect/#devices 第二部分:调试技巧 2.1 日志输出 如何使用日志输出来调试应用,包括使用console.log...// 示例代码:在JavaScript输出日志 console.log('这是一个日志消息'); 2.2 断点调试 讲解如何在代码设置断点,以逐步执行代码并检查变量状态。...// 示例代码:在JavaScript设置断点 function debugFunction() { debugger; // 在这里暂停执行,可以检查变量调用堆栈 const x =...10; console.log(x); } 第三部分:移动端调试工具 3.1 React Native调试 介绍React Native开发中常用调试工具,React Native Debugger...// 示例代码:使用Chrome DevTools进行内存分析 chrome://inspect/#devices 第五部分:远程调试 5.1 远程调试移动设备 如何设置并使用远程调试工具,以远程调试物理移动设备上运行应用

18720

自己实现 Chrome DevTools Coverage 功能

代码是否运行过数据只有运行时才能得到,所以肯定是 Chrome 暴露出来,传给 Chrome DevTools 做分析展示。...Chrome Chrome DevTools 通信是通过 CDP(Chrome DevTools Protocol)协议。...我们在 cssMap 里看下这个 id 对应代码: 然后取出 50 到 80 个字符代码: 也就是说所有 css 里只有这一段代码是生效: 你用 Chrome DevTools Coverage...总结 Chrome DevTools 有 Coverage 面板,可以分析 JS CSS 代码执行覆盖率,分析出哪些代码没执行,然后做后续优化。...我们通过 chrome-remote-interface 不同域 api 来进行了 CSS JS 代码收集,代码执行数据收集,有了这些数据就能轻松算出覆盖率。

82930

Node.js 调试大法 : v8_inspector

这两个参数只会启动Debugger监听模式,不会进入命令行调试模式,而且前者会运行完所有代码,通常可用于事件调试,后者会在进入时中断,方便从头开始调试。...Chrome DevTools与Node.js Debugger结合 Node.js命令行调试因为缺少调试界面,因此使用的人相对比较少。于是就诞生了node-inspector。...Node.js原生Debugger模块使用是V8-Debug Protcol,而且DevTools使用Chrome Debugging Protcol。...同时在5月份 DevTools Google I/O talk 有提到此功能。 就是说 v8_inspector 可以让 DevTools 直接连接 Node.jsDebugger进行调试。...现如今,新版本Chrome浏览器新版本Node.js支持通过一个新调试协议能互相直接通讯了,就不再需要node-inspector了。

2K00

15 个必须知道 chrome 开发工具技巧

在Web开发者Google Chrome是使用最广泛浏览器。六周一次发布周期一套强大不断扩大开发功能,使其成为了web开发者必备工具。...你可能已经熟悉了它部分功能,使用consoledebugger在线编辑CSS。在这篇文章,我们将分享15个有助于改进你开发流程技巧。...你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开时候,按Ctrl+P(在 mac 是cmd+p),就能快速搜寻打开你项目的文件。...二、在源代码搜索 如果你希望在源代码搜索要怎么办呢?...三、快速跳转到指定行 在Sources标签打开一个文件之后,在WindowsLinux,按Ctrl + G,(Cmd + L),然后输入行号,DevTools就会允许你跳转到文件任意一行。

68110

Devtools 老师傅养成 - Sources 面板

:关于【devtools 能做什么】建立完善知识结构,至于怎么做,请查阅官方文档;工具类知识需要实践,建议阅读本文时打开 sample[1] devtools 操作一遍 参考 1:google developers...在源代码添加debugger关键字 或者点击Sources面板代码行号 条件行断点:当满足条件时才会触发该断点 右击Sources面板代码行号 选择“Add conditional breakpoint...(目前只支持自动识别,不支持添加映射) 绿标文件:成功映射到本地文件,在 Styles Sources 文件名前,都会添加绿色圆点作为标识 目前 Devtools 已经支持 sass/scss...、UglifyJS、Grunt、Coffescript、Closure 等等,暂时还不支持 webpack,其他现代复杂框架, react 所有sources面板文件,都可以右键选择local...,Chrome firefox 都内置了对 Source Map 支持 在 Chorme devtools ,settings -> preference -> sources ,选中Enable

1.7K31

Chrome代码调试指南

image.png 在 Console 访问节点 通过 document.querySelectAll 访问 ? 通过 $0 快速访问选中元素 ? 拷贝 ->js path ?...console.time() var l = 1 console.timeEnd() 清除打印日志 console.clear() 调试 JavaScript 基本流程 在代码写入 debugger...左侧为全局静态资源,选择一个文件也可以对源文件进行编辑。 按住 ctrl+p 可以全局搜索某个资源 ? 按住 ctrl+shift+p 可以输入一些命令 ?...使用 Chrome DevTools 进行 H5 页面开发 通过使用 show sensors 命令呼出 Sensors 面板进行调试 ? 在 Edge 为传感器。 ? ? 网络菜单 ?...在 Chrome DevTools 中集成 React Vue 插件 集成 React 插件 由于国内无法使用 Google 商店,因此建议使用 Edge 商店。 ?

2.2K10

玩转 Chrome DevTools,定制自己调试工具

之前讲过,Chrome DevTools Chrome 是分离架构,两者之间通过 WebSocket 通信,通信协议是 Chrome DevTools Protocol,简称 CDP: 其实这不准确...我们可以从 npm 仓库下载 chrome-devtools-frontend 代码,我这里用是 1.0.672485 版本: npm install chrome-devtools-frontend...vue devtools 就是这样实现: 你可以看到它代码分包: backend 就是注入到页面的 js,frontend 部分就是 devtools page 显示交互实现。...也是可以Chrome 插件提供了 debugger api,可以代替 frontend 来给 backend 发消息,从而控制浏览器: 其实这个 puppeteer 原理很像了,只不过是在浏览器里...chrome 插件 debugger api 也可以发送 CDP 消息,可以实现 puppeteer 类似的效果。

3.3K30

Chrome DevTools 远程调试协议分析及实战

Chrome DevTools 提供功能非常丰富,包含 DOM、debugger、网络、性能等许多能力。 为什么 Chrome DevTools 能够适用这么多场景?...它们都代表一个应用, inspector.json 是其配置文件。如果此应用有界面,则带有 html,可以在浏览器打开 html 运行应用。...前端后端都在各自内网内,因此相互之间肯定无法直接访问。但是它们都可以访问公网服务器,并且,websocket 是可以跨域。...我们可以略微改造一下 server.js 代码,把所有收到推送数据打时间戳后保存到一个文件,持久化存储起来。...Chrome DevTools Extensions 如果想在 chrome 内嵌调试面板增加自定义能力,可以用 chrome 插件方式实现,例如vue-devtools[10]。

6.5K41

Chrome设置断点各种姿势

- 本文记录一下如何在Chrome上设置断点,以及可以设置哪些断点,并不涉及具体调试相关操作。...在JavaScript代码设置断点 刚工作时被leader安利了Chrome浏览器,那时一说到调试,就知道这一个操作 以为在行号上单击一下就是打断点,就是会调试了:) 当然这也是最最基本打断点方式了...首先需要打开Devtools切换到Source页签,然后在左侧file navigation中找到我们要设置断点文件并打开。 在打开页面上单击对应行号即可设置断点。...在JavaScript代码设置条件断点 当知道了如何在行号上单击来添加断点,已经能满足最最最基本调试了。 但如果遇到一些特殊情况,断点添加起来不是那么舒服时候要肿么办呢?...异常断点 当代码出现异常时,我们会在Console页签看到错误提醒,并可以通过后边锚点找到对应文件以及定位到出错代码行。 ?

14.4K80

网页调试之debugger原理与绕过

debugger 语句用于停止执行 JavaScript(以下简称JS),并调用 (如果可用) 调试函数。 使用 debugger 语句类似于在代码设置断点。...例如常见无限制debugger、配合settimeout延迟debugger代码混淆+debugger等等。...“反正只要chrome Devtools不开debugger便不会执行”....个人并不推荐新手使用替换法方法 替换法 JS注入 重写(Hook) 掠过法 Never pause here 条件断点 JS注入 实现js注入方式有很多,例如chrome Devtoolsoverrides...此方法有局限性,若在此函数还参杂了关键代码,将可能无法访问或调试等 总结 Debugger绕过其实并不难,但在调试仅仅是一道“开胃菜”,本节总结了debugger实现方式,以及触发机制。

7.3K70

爬虫:有什么让人眼前一亮调试习惯与技巧

如果想要清除电脑中网页浏览痕迹,可以使用安全软件(360安全卫士)清理痕迹按钮或手动删除历史记录和缓存文件。...网站收集或分享您相关信息 以提供免费表情图片为名跟踪按键记录恶意软件 在您浏览过程监视者 浏览器插件信息窃取 注意事项 IE Chrome 都会在无痕浏览下默认关闭扩展功能,而 FireFox...Hook Hook 又叫作钩子技术,它就是在程序运行过程,对其中某个方法进行重写,在原有的方法前后自定义代码。...文件映射Hook 在本地书写Hook函数,后使用DevToolssource选项卡Overrides进行文件映射。当网页运行满足Hook条件时候,便会触发Hook函数。 ?...常见实现方法有三种 DevToolssource选项卡Overrides进行文件映射 Tempermonkey 以上操作,请参考上文 Charles或其他第三方工具 ? ?

1.1K20

DevTools 实现原理与性能分析实战

Google 基于开源基础上顺势推出了 DevTools,广受网页开发者好评,随即也推动了 Chrome 在商业成功。...DevTools 此时开始超越同类工具,支持了远程真机调试。Chrome 是多进程架构,DOM JavaScript 是运行在子进程,所以 DevTools 底层实现,已与同类产品完全不同。...DevTools 已从一款 Web 调试工具,演变成 JavaScript 生态重要一员,助力更多开发者开发更多优秀代码。...4.1 环境准备 为了能访问到内核数据,浏览器内核需要开启 DevTools Server ,PC Chrome Android Chrome / WebView 开启方式略有不同。...Google 通过 DevTools 超越竞品特性,吸引了大批前端开发者,转到 Chrome 下开发自己产品。

1.1K30
领券