background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置CORS。...URL，造成困扰； 下面的截图是默认的新标签页和被扩展替换掉的新标签页。...由于devtools本身就是开发者工具页面，所以几乎没有方法可以直接调试它，直接用 chrome-extension://extid/devtools.html"的方式打开页面肯定报错，因为不支持相关特殊...我们先看老版的options： { // Chrome40以前的插件配置页写法 "options_page": "options.html", } 这个页面里面的内容就随你自己发挥了，配置之后在插件管理页就会看到一个选项按钮入口...这种方法在某些情况下很实用！
安装扩展 在此之前，我们先来介绍一款 Vue.js 本地开发的调试工具 —— Vue.js Devtools，这是一个浏览器扩展，当前支持 Chrome 和 Firefox 浏览器，你可以在 Chrome...商店搜索并安装它： 也可以在 Firefox 扩展中搜索并安装它： 接下来，我们以 Chrome 为例来演示它的基本使用。...（Windows 是 F12）面板，可以在在标签页的最右侧看到 Vue 选项卡： 在组件标签页（Components）下点击 Root 就可以看到当前页面 Vue 实例中的模型数据。...Vue 实例的所有属性和方法，比如在这里，我们可以访问和设置模型变量 name，设置之后，对应的数据值会同步到 HTML 元素上。...另外，如果当前 HTML 页面没用使用 Vue 框架，Vue.js Devtools 扩展会处于未激活状态： 可以看到该扩展的颜色是灰色的，同时在开发者工具的标签页也没有 Vue 选项卡，表示该页面没有使用
嘿！这里有一份电商AIGC福利包等你查收！【电商素材提效】【物料本土化】超多AIGC能力免费送！快点击参与吧！
在开发机上打开Chrome DevTools：可以在Chrome浏览器的地址栏输入chrome://inspect，然后按回车键打开Chrome DevTools。...在Chrome DevTools中选择你的设备：在"chrome://inspect/#devices"页面，应该能看到你的Android设备和设备上打开的Chrome标签页。...五、通过抓包分析优化网络性能 抓包分析是一种常用的网络性能分析方法，可以帮助我们了解H5页面的加载过程和性能瓶颈。...开始抓包：然后，在抓包工具上开始抓包。我们应该能够看到Android设备或模拟器上的所有HTTP和HTTPS请求。 加载H5页面：在Android设备或模拟器上加载H5页面。...我们应该能够在抓包工具上看到所有的网络请求。 分析数据：我们可以分析抓包数据来了解H5页面的加载过程。例如，可以查看每个请求的时间，找出加载时间最长的请求，查看HTTP状态码等。
界面概览 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS Elements 面板 Inspect Mode 快捷键 ctrl shift...设备模式 DOM 树 在元素面板左侧是当前页的 DOM 树 在 DOM 树中你可以： 直接增/删/改/复制/拖放移动 DOM 元素，查看实时效果(非持久化) 添加元素断点(节点移除断点，属性变更断点...窗格中： 会显示节点的各级样式 每级样式的来源 每条样式属性是否命中 可以直接增/删/改元素样式，查看实时效果(非持久化) 检查样式 color picker 在样式窗格中，devtools 给所有颜色属性值前添加了...(即最终实际应用到元素的值) 点开每一条最终值，可以看到所有该条样式的规则，以及代码来源 勾选show all选项，会同时列出元素继承 / 默认样式 计算样式 Event Listeners 在...它只包含来自 DOM 树的元素，这些元素可以展示在屏幕阅读器中页面的内容。 查看元素的 ARIA 属性(ARIA 属性确保屏幕阅读器具有所需的所有信息，以便正确表示页面的内容。
对于这些情况，你可以使用更合适的CTRL+D 快捷键。 ? 在上面的 GIF 中，你可以看到如何使用 CTRL+D 来选择（也可以选择CTRL+U 来取消选择）文本，以方便修改或替换它们。...使用命令面板 Chrome DevTools 中有很多工具、选项卡、文件、命令等，要记住每个工具的名称或找到它们的位置可能并不容易。...暗黑模式 从上面的截图和 GIF 中，你可能已经注意到我在 Chrome DevTools 中使用的是暗黑模式。...模拟慢网络 大多数人都知道 DevTools 中的网络选项卡，在这个选项卡中，你可以看到每个功能、操作或文件加载需要多长时间。...衡量网站性能 在性能这个话题上，我们来探讨一下 Chrome DevTools 在应用程序剖析方面可以为我们做什么。要运行 profiler，我们需要切换到 DevTools 中的性能选项卡。
你会很高兴听到chrome开发者功能也有这个功能，当DevTools被打开的时候，按Ctrl+P（在 mac 是cmd+p）,就能快速搜寻和打开你项目的文件。...当你想要研究在页面还没加载完之前出现的bug时，这会是一个很方便的方法。 七、优质打印 Chrome’s Developer Tools有内建的美化代码，可以返回一段最小化且格式易读的代码。...不过，你可以在Settings -> General 中切换成Show user agent shadow DOM，这样就会在元素标签页中显示被隐藏的代码。...十四、改变颜色格式 在颜色预览功能使用快捷键Shift + 点击，可以在rgba、hsl和hexadecimal来回切换颜色的格式 十五、通过workspaces来编辑本地文件 Workspaces是Chrome...现在，无论在哪一个文件夹，被选中的文件夹，包括其子目录和所有文件都可以被编辑。为了让Workspaces更高效，你可以将页面中用到的文件映射到相应的文件夹，允许在线编辑和简单的保存。
chrome 远程调试 如上，所有能够消费发送 cdp 消息的应用都可以被 chrome-devtools-frontend(https://github.com/ChromeDevTools/devtools-frontend...ws=${webSocketDebuggerUrl} 或者直接访问 http://0.0.0.0:9222/ 可以看到浏览器中的的 tab 线程页，点击需要调试的页面，http://0.0.0.0:9222...此时打开 network，查看 ws，可以看到 backend 端在接收 chrome-devtools-frontend(https://github.com/ChromeDevTools/devtools-frontend...chrome.debugger.onEvent.addListene：监听指定选项卡页中的所有事件，再回调函数 response cdp 消息到 scocket 服务端。...调用 chrome.debugger.onEvent.addListener，监听调试页的所有事件，转成 cdp 的消息结构 {method: method, params: params} ，发送消息事件名为
左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选"Edit as Html"直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现...下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin神马的）： ? ? 注意到上面的Properties没有？...这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。 Resources标签页 ? ?...它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦： ? ? Console标签页 就是Javascript控制台了： ? ?...（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦） 结语 Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。
，在某个时间点，你会想知道网页上显示的颜色代码。...你可以使用这个方便的小 Chrome 扩展程序。 使用它，你可以将鼠标悬停在网页上并识别特定颜色。如果你单击颜色，它将复制到剪贴板，以便你可以轻松访问它。...此外，还有一个旋转功能，因此你可以查看侧视图的外观并涵盖所有角度和变化。...Clear Cache 给你提供了清除缓存的最简单方法。...只需单击一下按钮，你的所有浏览数据都将一去不复返！ 没有确认对话框，没有弹出窗口或其他任何减慢你的清算过程的东西。只需单击一下。
另外，有的工具目前只在 Android Studio 中有，比如 Flutter Performance；甚至有的工具只在 debug 模式下可用。...号可以看到全部的快捷键) 刷新后可以在事件面板中检查和分析UI线程和GPU的耗时，以定位性能瓶颈。...将 debugProfileBuildsEnabled 设置为 true 可以在 Observatory 中看到 构建 Widget 的耗时 Save 后导出的 json 文件可以重新导入 Chrome...表格中的每个最上方的方法实际上是给定 CPU 样本的调用堆栈中的最后一个方法 Chrome Tracing 我们可以从 DevTools Timeline 中导出 timeline 文件。...widget 的 dirty/clean 生命周期 结合 debugProfileBuildsEnabled，可以在 DevTools Timeline 中观察到详细事件信息 注意：所有这些以 debug
安全问题 对于content_script js来说，首当其中的一个问题就是，插件可以获取页面的dom，换言之，插件可以操作页面内的所有dom，其中就包括非httponly的cookie....devtools js devtools js在插件体系中是一个比较特别的体系，如果我们一般把F12叫做开发者工具的话，那devtools js就是开发者工具的开发者工具。..."permissions": [ "pageCapture" ], ... } 它也只支持saveasMHTML一种方法 saveAsMHTML − chrome.pageCapture.saveAsMHTML...chrome.tabs chrome.tabs是用于操作标签页的api，算是所有api中比较重要的一个api，其中有很多特殊的操作，除了可以控制标签页以外，也可以在标签页内执行js，改变css。...\chrome_target\' -r 4104 -lan chromeext -d 当插件获取到或者*://*/*等类似的权限之后，插件可以操作所有打开的标签页，可以静默执行任意js
本文介绍的 Chrome 开发者工具基于 Chrome 65版本，如果你的 Chrome 开发者工具没有下文提到的那些内容，请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 Google...添加、启用和停用 CSS 类 点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里，您可以执行以下操作： 启用或停用当前与元素关联的类 向元素添加新类 ?...颜色值选择器。 点击可以在 RGBA、HSL 和十六进制之间切换。 调色板选择器。 点击可以选择不同的模板。 编辑 DOM Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构。...在发生以下一种 DOM 更改时触发断点：子树更改、属性更改、节点移除 子树修改 设置子树修改断点：右键选择某个元素，然后选择 Break on --> subtree modifications 添加、...通常，您会看到此环境设置为 top（页面的顶部框架）。 其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境，您需要从下拉菜单中选中它们。
测试时在日常工作中提BUG时，如果能提供有用的信息给到开发工程师，可以降低和开发工程师之间的沟通成本，巧用开发者工具也能间接体现自身具备一定的技术专业性，所以今天就分享Chrome Devtools 的常用功能...例如： （1）点击某个按钮，页面没有任何反应：在Console（控制台）处看到有看到js错误。...在Network（网络）处，没有看到前端对后端的功能接口发起调用，即点击按钮时没有看到返回数据，大多数情况下，这个BUG属于前端。...（2）点击某个按钮，页面没有任何反应：在Console（控制台）处看到没有js错误。 在Network（网络）处，看到请求返回的状态码是500。...例如：在日常工作中，希望调整一下某个页面的字体颜色，可以自行在Elements做调整，调整后可以在浏览器立即看到效果。当知道需要如何调整之后，再将相关信息给到UI设计师/前端开发，从而避免反复调整。
安全问题 对于content_script js来说，首当其中的一个问题就是，插件可以获取页面的dom，换言之，插件可以操作页面内的所有dom，其中就包括非httponly的cookie....可以看到成功获取到了页面内dom的信息，并且如果我们通过xhr跨域传出消息之后，我们在后台也成功收到了这个请求。 ?..."permissions": [ "pageCapture" ], ... } 它也只支持saveasMHTML一种方法 saveAsMHTML - chrome.pageCapture.saveAsMHTML...chrome.tabs chrome.tabs是用于操作标签页的api，算是所有api中比较重要的一个api，其中有很多特殊的操作，除了可以控制标签页以外，也可以在标签页内执行js，改变css。... 当插件获取到或者*://*/*等类似的权限之后，插件可以操作所有打开的标签页，可以静默执行任意js、css代码。
三、PageSpeed 1.使用 PageSpeed 我们可以在「Chrome DevTools」菜单栏中找到并打开： ? 2.分析报告 ?...需要特别注意，Performance 工具中的每一种颜色其实都有自己的含义。 HTML 文件为蓝色。 脚本为黄色。 样式表为紫色。 媒体文件为绿色。 其他资源为灰色。...在栈里，上面的 event 调用了下面的 event。 ? 注意红色警告： ?...3.找到相应的文件，可以看到文件左侧已经标记出了部分代码的使用情况 ? 解决思路也很简单：尽可能去通过 Webpack 来拆包，控制大小在 40KB 以下，移除那些未使用代码。...十、Chrome DevTools - Rendering 关于重渲对页面的影响，我们就不多说了。那么如何知道页面的渲染过程呢？我们可以通过 Rendering 来可视化查看。
中就不能在配置 action:default_popup 在newPage.js文件中可以使用*chrome.tabs[3]*和chrome.windows[4]API；可以使用 chrome.runtime.getUrl...": [""] } ] content_scripts属性除了配置js，还可以设置css样式，来实现修改页面的样式。...通过这些方法，您可以从内容脚本向扩展程序发送一次性 JSON 可序列化消息，或者从扩展程序向内容脚本发送。如需处理响应，请使用返回的 promise。...); // 在title属性中有一个%s的标识符，当contexts为selection，使用%s来表示选中的文字 chrome.contextMenus.create({ id: '...: "喝水小助手", message: "看到此消息的人可以和我一起来喝一杯水", }); devtools开发扩展工具 在manifest中配置一个devtools.html { "devtools_page
Chrome DevTools Protocol (CDP) Chrome DevTools Protocol (CDP) 的主页在：https://chromedevtools.github.io/devtools-protocol...Chrome 的开发者工具就是使用这一系列的接口，并且 Chrome 开发者工具来维护这些接口。 所谓 CDP 的协议，本质上是什么呢？本质上是基于 websocket 的一种协议。...如何打开 Protocol Monitor 在chrome的开发者工具Seettings/Experiments中开启 Protocol Monitor重启chrome，在console的更多里面就可以打开对应的...CDP 协议内容 我们从 Protocol Monitor 面板中可以看到，其中有几个字样，Method，Request，Response。...不过很可惜，我个人感觉官网的每个Method文档的描述写的实在是太简单了，也没有看到更详细的描述，只能通过名字和事件来猜测每个Method意思了。
基于Chrome扩展的浏览器可信事件与网页离线PDF导出 Chrome扩展是一种可以在浏览器中添加新功能和修改浏览器行为的软件程序，我们可以基于Manifest规范的API实现对于浏览器和Web页面在一定程度上的修改...Chrome.debugger API可以作为Chrome的远程调试协议的另一种传输方式，使用chrome.debugger可以连接到一个或多个标签页来监控网络交互、调试JavaScript、修改DOM...那么在这里我们可以借助Chrome DevTools Protocol协议来实现这个功能，实际上DevTools Protocol协议中有一个Page.printToPDF方法，这也是常用的Node服务端将...那么在调用方法之前，我们同样需要查询当前活跃的活动窗口，当然直接选择当前Window下的所有窗口也是可行的，此时需要注意权限清单中的tabs与activeTab权限的声明，同样的在这里我们仍然需要过滤chrome...TabId挂载debugger，前边提到了我们是希望将页面导出为单页PDF的，因此我们就需要将页面的高度和宽度取得，此时我们可以通过Page.getLayoutMetrics方法来获取页面的布局信息，这个方法会返回一个
server 启动了两类服务，一种 HTTP 服务；另一种 WebSocket 服务。 HTTP 服务提供内核信息查询能力。比如获取内核版本、获取调试页的列表、启动或关闭调试。.../page/3F9E05905F1919D563DF01BAEC64D2E4" } ] 返回了一个 JSON 的数组，每一个调试页占用一个数据元素，上面的返回值可以看出，笔者环境下 vivo 浏览器打开了两个页面...当调试移动端浏览器时，可以实时看到移动设备上的所浏览的屏幕，这是怎么做到的呢？...[89c0be32eb9a491bacbc2e7753387226~tplv-k3u1fbpfcp-zoom-1.image] 在右上角有个“设置”，展开配置项目，可以看到 Network 和 CPU...DevTools 能否分析网页层数吗？可以，在上面的“设置”中有一个选项 “Enable advanced paint instrumentation(slow)” 启用它，重新做一次性能录制。
今天我们以Puppeteer为例，介绍如何连接这个远程的Chrome。 在连之前，我们首先做一件事情，在通过命令启动的这个Chrome中，打开我们的登录练习页面，然后手动登录它。...= await puppeteer.connect({ browserWSEndpoint: address, }); 运行效果如下图所示： 可以看到，代码控制浏览器打开了一个新的标签页，并且立刻就能打开登录成功后的页面...这样一来，以后遇到需要登录的网站，只需要使用这个远程调试模式，先启动一个支持远程调试的Chrome浏览器，然后手动在浏览器上完成登录操作，接下来爬虫代码就再也不需要考虑登录这个动作了，爬虫可以直接访问登录后的页面...你自己测试的过程中，可能会发现标签页越开越多。其实不用担心，这是因为我为了演示登录后的页面，没有关闭当前标签页导致的。...你的爬虫执行完操作以后，可以使用await page.close()关闭当前标签页。只要至少保留一个标签页不关闭，那么这个浏览器窗口就可以一直使用。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
