文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

基于 Chrome Devtools 的远程调试实现

看来远程调试是一大痛点。介绍了一个基于 Chrome Devtools 的远程调试工具，可以让前端开发者更好地调试远程 web 页面。今日文章由腾讯前端工程师 @Linkpan 分享。...Devtools-Remote-Debugger 正如其名，是一个基于最新版 Chrome Devtools 开发者工具构建的 Web 远程调试工具。...它能够让 Web 开发者使用最熟悉的 devtools 调试工具来远程调试 Web 项目。...简单来说，实现远程调试需要具备三个条件： 通过原生 Javascript 实现 CDP 的协议规范，构建出 sdk.js (文件名称任意)，并在被调试页面中加载该 js 构建出 Chrome Devtools...然后在需要调试的 Web 项目 HTML 中加载该文件 npm run start 部署远程调试后端 Node 服务 建立连接后，在调试管理端打开 Chrome Devtools 开发者工具来调试目标页面

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

    使用chrome调试android前端页面

    移动端开发时，我们常使用chrome自带的模拟器，模拟各种手机设备。 但模拟毕竟是模拟，当开发完毕，使用真机访问页面出现问题时如何调试呢？...下面介绍一种针对android机的调试方法 1. 在pc和android手机上都安装最新版本的chrome 2. 使用usb将手机的PC相连接 3. ...手机中打开“设置”->"开发人员选项"->"USB调试" ? ? 4. ...5.在手机侧chrome中访问页面 比如：m.haha.sogou.com 同步的，我们会在pc侧的chrome上看到到手机侧访问的页面，如下图所示 ? 6. ...点击上图中的inspect, 熟悉的调试界面出现！ ? 注意图中右上角的手机图标，点击后，效果更加酸爽。手机打开的页面被直接拉到pc上显示了。调试更加事半功倍！ ?

    2.8K10

    Android远程调试Web页面

    曾经有一段时间专门处理了一下远程调试的事情，要解决的问题是不依赖Chrome如何在移动设备中调试Web页面。...利用Chrome调试Android Web页面，本来是很好的事情，但是由于Google在打开调试面板时，这个域名是google.com，我们都知道这个域名在中国大陆被封了，但我们又要调试，于是陷入了黑暗的死循环...今天，要分享的就是，如何绕过google.com域名，并且能正常顺利的去调试Android Web页面。.../net/unix | grep --text _devtools_remote 获取到远程设备开启的socket地址 最后使用 :forward:;服务进行一次映射 由于国内厂商的Android设备中的浏览器默认开启可调试...这个时候，根据Devtools协议，可以通过http://localhost:/json/version来获取远程调试环境的一些信息，格式如下： { "Android-Package":

    1.9K20

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

    调试器后端：实现了调试协议的可调试实体，例如 chrome、node.js。...Chrome DevTools 我们可以看到，Chrome DevTools 的核心是调试器协议。...开启调试端口 不同后端打开调试端口的方式不同，以 chrome 为例： chrome 和内嵌的调试面板使用 Embedder channel 通信，这个消息通道不能被用来做远程调试，远程调试我们需要使用...使用 websocket channel 我们还需要打开 chrome 的远程调试端口，以命令行参数 remote-debugging-port 打开 chrome。...跨域 如果前端和后端都在同一网段，我们使用以上方式就可以进行调试了，但是如果前后端在不同的内网内，我们如何实现远程调试？ 只要我们有一台放在公网的服务器就可以调试。

    9K41

    Chrome DevTools 远程调试安卓网页的原理

    作为前端开发，我们每天都会用 Chrome DevTools 调试 Chrome 的网页，但其实它还可以远程调试安卓手机的网页。 那 Chrome Devtools 如何远程调试安卓网页呢？...今天我们就来了解一下： 远程调试安卓网页 用数据线把安卓手机和电脑连接起来，在手机设置里打开 USB 调试： 然后在 chrome 打开 chrome://inspect 页面，勾选 Discover...这样只要实现对接 CDP 协议的 ws 服务端，就可以用 Chrome DevTools 来调试，所以 Chrome DevTools 可以用来调试浏览器的网页、调试 Node.js，调试 Electron...那自然也就可以远程调试安卓手机的网页了，只要开启了 USB 调试，那手机和电脑就可以做网络通信，从而实现基于 CDP 的调试。...理解了调试的原理，Chrome DevTools 调试安卓网页的流程，就可以愉快的远程调试安卓手机的网页了。

    3.1K10

    远程调试 Android 设备使用入门

    或 Linux 计算机远程调试 Android 设备上的实时内容。...本教程将向您展示如何： 设置您的 Android 设备进行远程调试，并从开发计算机上发现设备。 从您的开发计算机检查和调试 Android 设备上的实时内容。...将 Android 设备上的内容抓屏到您的开发计算机上的 DevTools 实例中。 image.png 远程调试图示 要求 开发计算机上已安装 Chrome 32 或更高版本。...您应使用您的一个 Google 帐户登录到 Chrome。 远程调试在隐身模式或访客模式下无法运行。 打开 DevTools。...Unknown 被替换为您的 Android 设备的型号名称。 绿色圆圈和 Connected 文本表示您已大功告成，可以从开发计算机远程调试您的 Android 设备。

    1.8K30

    移动前端页面与Chrome的远程真机调试

    那么问题来了，要怎么调试手机上的前端页面呢？ 很久很久以前，我的做法是：在PC上用Chrome移动模拟器调试好后，基本OK，再把相关文件传到手机上，在真机上测试以防特殊问题出现。...现在，我的做法是：用PC端的Chrome与手机端的Chrome连接，通过一条数据线，进行远程的真机调试。...接下来，就通过小米5，诠释这一调试方案的准备过程 一、PC端准备Chrome新版本、手机端准备移动Chrome新版本 二、手机的开发者选项打开，其中的USB调试打开 ?...四、确定PC端Chrome与移动端Chrome的连接，进行调试 PC端打开 chrome://inspect/#devices ，可以看到，没有发现设备 ?...在移动端Chrome中就可以看到页面得到了更新，选择inspect选项，进行审查元素，可弹出调试窗口 ?

    2.7K30

    聊一聊如何基于Chrome Devtools 进行远程调试

    看来远程调试是一大痛点。介绍了一个基于 Chrome Devtools 的远程调试工具，可以让前端开发者更好地调试远程 web 页面。今日文章由腾讯前端工程师 @Linkpan 分享。...Devtools-Remote-Debugger 正如其名，是一个基于最新版 Chrome Devtools 开发者工具构建的 Web 远程调试工具。...GitHub 项目地址：https://github.com/Nice-PLQ/devtools-remote-debugger 先来看下远程调试的效果 Chrome Devtools 是前端几乎每天都需要用到的开发调试工具...简单来说，实现远程调试需要具备三个条件： 通过原生 Javascript 实现 CDP 的协议规范，构建出 sdk.js (文件名称任意)，并在被调试页面中加载该 js 构建出 Chrome Devtools...然后在需要调试的 Web 项目 HTML 中加载该文件 npm run start 部署远程调试后端 Node 服务 建立连接后，在调试管理端打开 Chrome Devtools 开发者工具来调试目标页面

    2.5K30

    通过 Chrome devtools protocol 和 adb 调试 Android Webview

    这个技术可以用于 UI 自动化等，用脚本自动控制 Android webview 或注入 js 执行 前提条件：usb 连接手机，adb 能查找到 devices，如果有问题，多拔插几次，确认授权。...第一步，确认安卓 App 编译时已经启用了webview 允许调试（一般是允许的，可以通过连接usb，打开chrome的inspect页面（chrome://inspect/#devices），能连上就表示允许调试了...使用命令： curl localhost:9222/json/version 使用命令： curl localhost:9222/json/list 可以获得当前网页信息和调试用的websocket链接...activity=23cb19698abc84fa"}}} 再往后，可以使用一些现成的高级别api库，例如puppeteer实际就是基于CDP的一个库，但它只支持内置的chromium，无法用来调试外部浏览器...按介绍说，https://github.com/cyrus-and/chrome-remote-interface 是一个相关的库，但实际使用时总无法连上ws。

    6K40

    【Android TV 开发】安卓电视调试 ( 开启网络远程调试 )

    Android TV 开发系列文章目录 【Android TV 开发】安卓电视调试 ( 开启网络远程调试 ) ---- 文章目录 Android TV 开发系列文章目录 一、硬件环境准备 二、开启开发者模式...二、查询 Android 电视局域网 IP 地址 四、开启远程连接 一、硬件环境准备 ---- 一般电视盒子是不具备 USB 线调试功能 , 多数只能使用 adb 远程调试 , 国内的电视盒子提供一个...公对公接口 , 两头都是 USB 接口 , 有些电视没有该功能 ) 远程调试 : 开发者电脑 与 Android TV , 必须在同一个局域网中 , 才能进行远程调试 ; ( 远程调试的速度一般要低于...Android TV 的局域网 IP 地址 ; 四、开启远程连接 ---- 在上面得到安卓电视的 IP 地址是 192.168.1.104 , 先 ping 一下 , 查看是否能 ping 通...; 使用 adb devices 命令 , 可以查看当前使用 adb 调试的设备 ; 在 Android Studio 中也可以看到该电视盒子 , 并且打印电视盒子的相关日志 , 向电视盒子中部署程序

    5.5K21

    一次远程会议中我用到的 Chrome DevTools 调试技巧

    昨天在一次和百度地图客服的远程沟通中，我体验到了一种“专业技能差距带来的孤独感”。事情起因是我用腾讯会议共享了我的浏览器页面，准备演示一个热力图显示异常的问题。...习惯使然，我顺手打开了 Chrome 的 DevTools，选中页面中多余的遮挡元素删掉、用快捷键搜索热力图节点、甚至还撤销了一个误删操作……正当我得意于一气呵成的操作时，客服小姐姐突然惊呼了一句：“哇...虽然简单，却很可能成为你下一次调试、演示、协作时的效率神器。二、操作技巧2.1 删除页面多余元素当页面中出现遮挡、干扰排查的浮层时，最直观的做法就是删掉它。...这个方法特别适合处理大型项目、复杂结构下的快速调试。...三、小结回顾通过今天的介绍，相信你已经掌握了 DevTools 中三个实用的“小绝招”：删除遮挡元素，提升调试清晰度；快捷键撤销误删，稳住调试现场；快速搜索 DOM 节点，高效定位问题区域。

    22300

    使用Xposed强制android WebView开启debug模式使用Xposed强制android WebView开启debug模式Xposed前期工作

    使用Xposed强制android WebView开启debug模式 从 https://developer.chrome.com/devtools/docs/remote-debugging 我们可以知道在...android 4.4+可以通过在apk中使用下面的代码开启webview的chrome远程调试 WebView.setWebContentsDebuggingEnabled(true); 但我们开发中接触的...} }); } } 上面的代码可以为QQ打开WebView的webContentsDebuggingEnabled Xposed工作原理可以参考文档： https://github.com/rovo89.../XposedBridge/wiki/Development-tutorial 没有 详细的API可以查看源代码： https://github.com/rovo89/XposedBridge/tree.../master/src/de/robv/android/xposed 前期工作 1、需要android 4.4+ Root手机 2、安装 Xposed框架 3、已开启QQ WebView的Apk： webviewdebughook.Apk

    3.3K20

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

    DevTools 此时开始超越同类工具，支持了远程真机调试。Chrome 是多进程架构，DOM 和 JavaScript 是运行在子进程中的，所以 DevTools 的底层实现，已与同类产品完全不同。...Chrome 的架构师将 DevTools 实现架构调成在 client-server 模式，这个架构让远程真机调试成为可能。...轻松了实现了远程调试的能力，不要小瞧这一实现，这对前端开发者效率提升是极大的。...因为前端开发者的工作环境，目前来看基本是在 PC （Windows、Mac、Linux 统称为 PC）下，通过远程调试能力的实现，让移动端的开发实现了所见即所得。...对于 Android Chrome 与 WebView 略有差异，由于 WebView 默认是不开启调试功能的，需要在客户端手动开启，才能启动 Server。

    1.8K30

    Android WebView 调试方法

    调试Android WebView中的h5页面，通常就是通过alert和抓包工具来定位问题，效率低且无法直接调试样式或打断点，可谓是事倍功半。...本文介绍一下我在项目中使用的新方法，能够通过chrome的开发工具在原生 Android 应用中调试 WebView。...前提条件： Android4.4+ 基本原理： 1.在APP中启用 WebView 调试，开启调试后，Chrome DevTools才能对WebView进行远程调试； WebView.setWebContentsDebuggingEnabled...(true);　 2.通过访问chrome://inspect/#devices访问已启用调试的 WebView 列表； 3.调试Webview与远程调试普通页面相同，远程调试普通页面也就是在安卓手机中安装...Chrome浏览器，使用USB 连接 PC，然后在 PC 的 Chrome 浏览器中打开 chrome://inspect/#devices 即可。

    5.7K81

    Fiddler 高级用法：Fiddler Script 与 HTTP 断点调试

    在大多数情况下，通过fiddler默认菜单的功能就可以基本满足开发者的调试需求，然而如果需要满足更复杂的调试场景时，单纯通过fiddler菜单已无法达到开发者的调试要求。...3、实战 HTTP 请求、响应的断点调试 断点命令介绍： bpu在请求开始时中断, bpafter在响应到达时中断, bps在特定http状态码时中断, bpv/bpm在特定请求method时中断...4、Fiddler 远程捕获 Android/iPhone 请求 Android 或者 iPhone 上 APP 的请求对用户来说是不可见的，不像 PC 上用浏览器 F12 可以很方便的调试，我们有没有办法去调试呢...答案必然是有的，那就是 Fiddler 的代理可以支持 APP 远程连接与抓包调试。...(especially in Chrome) http://stackoverflow.com/questions/21068905/how-to-change-proxy-settings-in-android-especially-in-chrome

    4.6K81
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券