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

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

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

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

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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

cdp 远程调试方案

devtools 调试系统完整的调试系统分别由前端，后端，协议，通道四部分组成 Frontend：调试器前端，如 chrome-devtools-frontend(https://github.com...chrome /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 -...ws=${webSocketDebuggerUrl} 或者直接访问 http://0.0.0.0:9222/ 可以看到浏览器中的的 tab 线程页，点击需要调试的页面，http://0.0.0.0:9222...chrome.debugger.onEvent.addListene：监听指定选项卡页中的所有事件，再回调函数 response cdp 消息到 scocket 服务端。...与需要依赖在插件 background 层执行 chrome.debugger API 的方案不同。chobitsu 在浏览器运行时环境中手动实现了cdp 协议。

2.6K2 0

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.2K2 0

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.6K5 0

前端工程师生产环境 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.3K4 0

在 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

4K3 0

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

// 示例代码：在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 远程调试移动设备如何设置并使用远程调试工具，以远程调试物理移动设备上运行的应用

2962 0

自己实现 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 的代码的收集，代码执行数据的收集，有了这些数据就能轻松算出覆盖率。

8923 0

一键自动化博客发布工具,chrome和firfox详细配置

确保你下载的是与你的操作系统和Chrome版本相匹配的版本。...第二就是可以借助现有浏览器的登录态，不需要每次都在程序中重新登录。因为有些网站的登录条件是很复杂的。比如腾讯云，你需要时不时的进行手机扫码才能登录。我们的步骤如下：下载并安装 Chrome。.../MacOS/Google\ Chrome" 以debug模式启动 chrome --remote-debugging-port=9222 !!!!...chrome调试地址 debugger_address: localhost:9222/devtools/browser/4aab2b8b-112c-48a3-ba38-12baa123445 把service_location...和debugger_address修改为你自己本机的配置。

2081 0

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.js的Debugger进行调试。...现如今，新版本的Chrome浏览器和新版本的Node.js支持通过一个新的调试协议能互相直接通讯了，就不再需要node-inspector了。

2.1K0 0

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

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

7231 0

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.8K3 1

玩转 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.7K3 0

调试工具的通用原理：调试四要素

除了 Chrome DevTools 之外，VSCode Debugger 也是常用的调试工具： VSCode Debugger 原理 VSCode Debugger 的原理和 Chrome DevTools...这样 VSCode Debugger 就可以用同一套 UI 和逻辑来调试各种语言的代码，只要对接不同的 Debug Apapter 做协议转换即可。...Chrome 插件中可以访问网页的 DOM 的部分叫做 Content Script，随页面启动而生效，可以写一些操作 DOM 的逻辑。...Backgroud 部分可以访问 extension api，可以和 Content Script 还有 DevTools Page 通信。...DevTools Page 部分可以访问 devtools api，可以向当前 window 注入 JS 执行。这就是 Chrome 插件的大概架构。

2.4K2 0

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.3K1 0

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

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

7.2K4 1

Chrome设置断点的各种姿势

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

15.3K8 0

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

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

1.2K2 0

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.2K3 0

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

本文介绍的 Chrome 开发者工具基于 Chrome 65版本，如果你的 Chrome 开发者工具没有下文提到的那些内容，请检查下 Chrome 的版本简介 Chrome 开发者工具是一套内置于 Google...Chrome 中的Web开发和调试工具，可用来对网站进行迭代、调试和分析打开 Chrome 开发者工具的方式有：在Chrome菜单中选择更多工具 > 开发者工具在页面元素上右键点击，选择 “检查...控制台默认设置为 top 环境，除非您通过检查其他环境中的某个元素来访问 DevTools。...断点调试代码行断点当我们知道需要调试的代码的确切位置的时候，使用代码行断点 DevTools 设置代码行断点：点击 Sources 选项卡。打开包含您想要调试的代码行的文件。找到该代码行。...当然你也可以在代码中使用 debugger 来设置代码行断点，效果和在 DevTools 中设置是一样的： console.log('a'); console.log('b'); debugger; console.log

8.3K11 1

网页调试之debugger原理与绕过

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

8.5K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云