为什么带有chrome-devtools://的url不能打开devtools？

带有"chrome-devtools://"的URL是Chrome浏览器内部使用的特殊协议，用于打开开发者工具（DevTools）。这种URL是用于在浏览器中调试和检查网页的工具，而不是用于打开其他网页或资源。

由于安全性和隐私考虑，Chrome浏览器限制了通过普通方式直接打开"chrome-devtools://" URL来访问开发者工具。这是为了防止恶意网站或应用程序滥用开发者工具来窃取用户信息或进行其他恶意行为。

如果您想打开开发者工具，可以使用以下方法：

使用快捷键：在Chrome浏览器中，按下F12键或Ctrl+Shift+I（Windows）/Cmd+Option+I（Mac）可以快速打开开发者工具。
右键菜单：在Chrome浏览器中，右键点击网页空白处，选择"检查"或"检查元素"，即可打开开发者工具。
菜单栏：点击Chrome浏览器右上角的菜单按钮（三个竖点），选择"更多工具"，然后选择"开发者工具"。

请注意，以上方法适用于正常的网页调试和开发场景。如果您是开发人员或需要更高级的调试功能，建议参考Chrome官方文档或其他相关资源，深入学习和了解Chrome开发者工具的使用方法和技巧。

腾讯云相关产品和产品介绍链接地址：腾讯云开发者工具：https://cloud.tencent.com/product/devtools

相关·内容

调试你的node.js程序(一)

使用node.js开发已经有一段时间了，最开始的调试是使用工具node-inspector；不过node-inspector已经很长一段时间不能用了。现在要调试node.js程序需要使用新的方式。...--inspect app.js 此时nodejs便启动了调试模式，并打印出调试的url地址,如下： Debugger listening on port 9229....To start debugging, open the following URL in Chrome: chrome-devtools://devtools/remote/serve_file...9229，要开始调试，在chrome中打开下文中的url地址即可： chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980...experiments=true&v8only=true&ws=localhost:9229/13e392f6-51aa-4c0b-9364-393911748471 在chrome中打开浏览器地址，结果如下

1.1K4 0

【Node.js】如何调试你的 Node.js 代码？

很多时候，我苦恼于 Node.js 的调试，只会使用 console.log 这种带有侵入性的方法，但是其实 Node.js 也可以做到跟浏览器调试一样的方便。...devtools 提供了图形化的调试界面。...如何进入 Chrome 的调试界面第一种方式（自己尝试无效）打开 http://localhost:8888/json/list，其中 8888 是上面 --inspect 的参数。...[ { "description": "node.js instance", "devtoolsFrontendUrl": "chrome-devtools://...true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d", "devtoolsFrontendUrlCompat": "chrome-devtools

8.3K1 0

Devtools 老师傅养成 - Chrome Devtools介绍

，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 Devtools Sample[1]和 devtools 操作一遍参考 1：google developers 官方文档[2] 参考...Firebug[7]：2006年诞生，2007年被Firefox开源，当时只有单一的console面板，带有AJAX日志；于2017停用，Firefox的调试工具转为全新的Devtools。...新版发布速度递增新功能数量递增稳定性递减 Chrome Devtools 界面概览 F12打开的界面几个重要面板简介 Elements面板：实时检查和编辑页面的HTML & CSS...url chrome://flags/ 搜索dev 打开Experimental Extension APIs开关在settings中找到experiments可以找到相关实验性功能...developers 官方文档: https://developers.google.com/web/tools/chrome-devtools/ [3] Mastering Chrome Developer

1.1K4 1

为什么我建议线上高并发量的日志输出的时候不能带有代码位置

如果大家发现网上有抄袭本文章的，欢迎举报，并且积极向这个 github 仓库提交 issue，谢谢支持~ 本文是“为什么我建议”系列第二篇，本系列中会针对一些在高并发场景下，我对于组内后台开发的一些开发建议以及开发规范的要求进行说明和分析解读...往期回顾： 为什么我建议在复杂但是性能关键的表上所有查询都加上 force index 在业务一开始上线的时候，我们线上日志级别是 INFO，并且在日志内容中输出了代码位置，格式例如： 2022-03...响应式的代码就更是这样了，一层套一层，各种拼接观察点。上面列出的堆栈就是响应式的堆栈。...填充堆栈信息，主要访问的其实就是 SymbolTable，StringTable 这些，因为我们要看到的是具体的类名方法名，而不是类的地址以及方法的地址，更不是类名的地址以及方法名的地址。...由此，我建议：对于微服务环境，尤其是响应式微服务环境，堆栈深度非常深，如果会输出大量的日志的话，这个日志是不能带有代码位置的，否则会造成严重的性能衰减。

1.4K2 0

在win10+chrome环境中调试ios-safari画面

手头上有个调试Echarts地图在ios端显示情况的任务，工作电脑是win10，因此在这里，找到了方法。 1 下载iTunes 在官网下载iTunes。才能识别连接的ios设备。...4 启动proxy 在控制台执行： ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html 结果...可以发现地址栏变为：同时显示该ios设备中Safari浏览器打开的所有页面，和一个提示： Inspectable pages for iPad: http://******** Note:...browser may block the above links with JavaScript console error: Not allowed to load local resource: chrome-devtools...提示显示需要右键点击点击链接，选择复制链接地址，再在新标签页中打开链接。就能看到常见的chrome调试接口 6 缺点发现console输出无效。

2.1K1 0

Devtools 老师傅养成 - Memory 内存

1.5K4 2

第六十五期：简述Chrome DevTool 调试Node 的基本原理

node --inspect index.js 执行命令后，打开浏览器，并导航到 chrome://inspect界面，我们就可以对我们的Nodejs项目进行调试。...点击【Open dedicated DevTools for Node】Node专用调试工具，即可进行调试。非常方便。它是如何工作的？...当node 执行 --inspect标识时，V8侦听器会打开一个端口接收WebSocket链接。一旦链接建立完成，以JSON形式的数据包命令就会在侦听器和客户端之间来回发送。...【chrome-devtools://】是一个Chrome浏览器可以识别的特殊的协议。...它可以加载调试工具的UI界面，但是调试工具是通过远程模式进行加载的（remote mode）,这种模式通过chrome-devtools://URI 提供了一个websocket 端点。

1K1 0

chrome调试JavaScript脚本

Chrome DevTools 提供了一系列实用的工具使得调试 JavaScript 应用不再是一件痛苦的事。...打开 DevTools 窗口。如果没有选中 Sources，则手动选中。 ? 源面板允许你查看正在浏览的页面上所有的脚本。...在 DevTools 中使用断点可以调试 JavaScript 代码， DOM 更新以及网络调用。添加及删除断点在源面板中，打开一份 JavaScript 文件用于调试。...更多信息查看http://wiki.jikexueyuan.com/project/chrome-devtools/debugging-javascript.html 转载自极客学院http://wiki.jikexueyuan.com.../project/chrome-devtools/debugging-javascript.html

1.9K4 0

使用 Chrome Devtools 调试您的 Node.js 程序

filePath: ', filePath); fs.readFile(filePath, (err, res) => { console.log(err, res.toString()); }); 运行带有...在 Chrome 中打开浏览器地址栏输入 chrome://inspect/ 按回车键，如下所示： ?...Remote Target 下展示了当前运行的 Node.js 版本号，打开 inspect 或 Open dedicated Devtools for Node 链接，如下所示： ?...**Tips：**当前程序运行在断点第 6 行，鼠标移动到 req.url 上之后会看到该属性对应的值。 ?...Reference chrome-devtools debugging-getting-started

3K1 0

Devtools 老师傅养成 - Performance 面板

能做什么】建立完善的知识结构，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 sample[1]和 devtools 操作一遍参考 1：google developers 官方文档...) 以隐身模式打开网页（隐身模式可确保 Chrome 以干净的状态运行。...减少请求数雪碧图合并压缩css/js（另一个原因是为了减少重绘）利用Cache-Control等缓存静态资源，在更新静态资源时使用不同url或文件名带上版本懒加载，出现再加载参考资料 [1]...https://masteringdevtools.com/ [2] google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools.../tools/chrome-devtools/evaluate-performance/performance-reference - END -

2.2K4 1

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

8.3K11 1

自动化-Appium-第一个Demo-Web（Java版）

-f chrome-devtools://devtools/bundled/inspector.html Mac上打开Chrome浏览器，在地址栏输入http://localhost:9221/，这里会显示所有已连接的设备清单...或者，选中后，鼠标右键复制链接地址例如： chrome-devtools://devtools/bundled/inspector.html?...ws=localhost:9222/devtools/page/1 打开Chrome新窗口，将复制的地址粘贴后访问显示html源码信息，则可以获取相应的Webview元素信息。...-f chrome-devtools://devtools/bundled/inspector.html Mac上打开Chrome浏览器，在地址栏输入http://localhost:9221/，这里会显示所有已连接的设备清单...或者，选中后，鼠标右键复制链接地址例如： chrome-devtools://devtools/bundled/inspector.html?

2.2K1 0

使用Safari或者Chrome远程调试IOS Safari中的页面

[image.png] 1.3 调试步骤先用IPhone 的Safari打开要调试的页面，然后将IPhone连到Mac上，打开Mac的Safari浏览器，在“开发”菜单中选择连接的手机，找到调试的网页...brew install ios-webkit-debug-proxy ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html...过程中遇到的问题执行ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html时报错 Listing devices...其实老版本的在打开localhost:9221页面看到手机上打开的页面之后可以直接右键，在新的标签页直接开始调试。既然新版不支持，那就按照官方的建议继续搞吧。 Round Two ！！！...chrome://inspect 页面，然后按照下图添加适配器的地址就可以看到手机上打开的页面了。

21.1K0 0

7个能提高你生产力的隐藏Chrome DevTools功能

在低端设备上测试Web应用性能一般而言，我们开发人员都是在具有高速网络连接的高端设备上工作。但不幸的是，我们的用户并不能一直使用高端设备和高速互联网连接。...你可以这样做：打开Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令菜单。...打开 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令行菜单，输入 Show Rendering 后回车打开渲染面板。...打开 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令行，输入 Show Network 后回车打开网络面板。...资源： https://developers.google.com/web/tools/chrome-devtools https://twitter.com/ChromeDevTools https:

1.2K1 0

iPhone页面的常用调试方法

基于 ios-webkit-debug-proxy 的调试 Mac上的safari调试功能不够好，而且不能调试微信中的页面，使用weinre只能简单地调试微信页面，无法进行脚本断点等高级功能最好的办法莫过于让...iPhone可Chrome Devtools进行连接，充分利用好的调试工具与现有的平台，进行调试。...bucket add extras 安装工具：scoop install ios-webkit-debug-proxy USB连接设备（或模拟器）开启ios_webkit_debug_proxy -f chrome-devtools...或者使用Chrome自身的DevTools来调试，即可实现在Window中调试手机Safari页面（然而还是不支持微信内置的） ?...下载越狱版的微信ipa（尽量通过正规渠道获取，也可直接在PP助手下载，下载的时候不要连接手机） ipa是iOS的应用程序文件包，类似安卓中的apk，正常版本的带有加密信息，打包后会出问题，越狱版已经去壳

3.4K1 0

Google Chrome开发文档地址

https://developers.google.com/web/tools/chrome-devtools 我建议在使用的时候要切换成纯英文的就是这样的一个界面 Ctrl+Shift+I会打开一个调试的窗口...hl=zh-CN 对于所有的Google开发服务,在这里这里就看一个分析用的SDK 可以看到可以选择要插入的平台如果选择安卓的话,也有相应二点文档 https://firebase.google.com...platform=Android 一些具体的文档细节可以选择配置具体收集时的条件字段用来配置

1.1K1 0

Chrome 70-71 Live Expression 及 global variable 功能

chrome浏览器是世界上最适合开发人员使用的浏览器的，没有之一。 Live Expression 从 chrome70起，我们可以在控制台上方可以放一个动态表达式，用于实时监控它的值。...点击 "Create Live Expression" 眼睛图标，打开动态表达式界面。 ?...$0 高亮当前所选中的node $0.parentElement 高亮当前所选中的node的父节点 Store DOM nodes as global variables 我们可以把页面上的某元素节点作为全局变量...参考： https://developers.google.com/web/updates/2018/08/devtools https://developers.google.com/web/updates.../2018/10/devtools#bonus https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference

1.6K4 0

远程调试 Android 设备使用入门

您应使用您的一个 Google 帐户登录到 Chrome。远程调试在隐身模式或访客模式下无法运行。打开 DevTools。...image.png 打开远程设备抽屉式导航栏在 DevTools 中，点击 Settings 标签（如果正在显示另一个标签）。确保已启用 Discover USB devices。...第 2 步：从您的开发计算机调试 Android 设备上的内容。如果您尚未在 Android 设备上打开 Chrome，则现在打开它。返回 DevTools，点击与设备的型号名称匹配的标签。...点击您刚刚打开的网址旁的 Inspect。这将打开一个新的 DevTools 实例。您的 Android 设备上运行的 Chrome 的版本决定在开发计算机上打开的 DevTools 的版本。...https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?

1.1K3 0

如何使用谷歌浏览器远程调试安卓ios真机H5应用？

因为是内部用的功能，在测试的时候也没有可以去关注兼容性和一些app端的专项测试，我们只是负责测试自己部门开发的轻应用，接入到公司的平台中能不能正常使用。...2 远程调试android设备有几个准备事项要先检查一下： 1、将手机与电脑用数据线连接，确保电脑上安装了手机的驱动，手机打开调试模式 2、确保电脑上可以访问谷歌的相关网站，否则无法捕捉到手机上的页面...如果未得到这样的提示信息，可以多重试几次这个步骤，如果页面有标红的报错信息，可以看一下，C盘用户目录下，是否有生成scoop的文件夹，有的话，直接在scoop的文件夹目录下打开powershell窗口，...，如果是抓取ios自带的safari浏览器上访问的网页的话，还需要在iphone的设置->safari-->高级->web检查器，打开对应的开关。...4、在powershell窗口中输入如下命令： ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html ?

2.2K4 0

【调试】939- 5个Chrome调试混合应用的技巧

注意如果访问 “chrome://inspect/#devices” 页面会一直提示 404，可以在翻墙情况下，先在 Chrome 访问 https://chrome-devtools-frontend.appspot.com...二、筛选特定条件的请求在 Network 面板中，我们可以在 Filter 输入框中，通过各种筛选条件，来查看满足条件的请求。使用场景：如只需要查看失败或者符合指定 URL 的请求。...关于过滤器更多用法，可以阅读《Chrome DevTools: How to Filter Network Requests》(https://www.freecodecamp.org/news/chrome-devtools-network-tab-tricks...三、快速断点报错信息在 Sources 面板中，我们可以开启异常自动断点的开关，当我们代码抛出异常，会自动在抛出异常的地方断点，能帮助我们快速定位到错误信息，并提供完整的错误信息的方法调用栈。 ?...六、学习资料 Chrome tips community(https://umaar.com) Chrome 开发者工具中文文档(https://www.css88.com/doc/chrome-devtools

2.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云