浏览器远程调试

最新推荐文章于 2023-08-13 09:00:49 发布
最新推荐文章于 2023-08-13 09:00:49 发布
阅读量1k 收藏
点赞数
分类专栏： 其他 文章标签： 移动设备 调试

今天想去获得别人移动版的代码，通过桌面浏览器访问受了限制，没办法，只能另辟蹊径。

然后偶然发现了firefox有一个远程调试功能，咦~，通过远程调试不就是能得到别人的js代码吗，于是就找到下面的文章。

要注意，firefox后来的版本远程调试工具不叫“远程调试器”，而是叫“连接...”，大家不要被误导了哦，这里我花了很长时间才发现这个坑.


转自：http://blog.csdn.net/yohoph/article/details/10112161

做移动互联网开发呢，比较头疼的可能就是调试问题了，我是这么感觉的。因此，我对市面上比较流行的远程调试方法做了总结，对比了 Firefox、Chrome、Opera 三大浏览器的远程调试工具，大家各取所需，希望能对大家的日常工作有多帮助。

一、Opera 远程调试

准备工作：

方式一、 通过欧朋 HD 模拟器和 Opera Dragonfly 进行远程调试

  1. 安装下载欧朋 HD 模拟器、桌面版 Opera、欧朋 HD。
  2. 打开 Opera，“Ctrl + Shift + i” 打开调试工具 Dragonfly。

    dragonfly

  3. 点击右上 “远程调试设置”，默认端口 “7001” 可以不改，点击 “应用”。

  4. 出现 “在端口7001上等待主机连接”。

  5. 运行欧朋 HD 模拟器，随便选择左侧 “Profile” 里的一个设备，我选择 “HTC Desire”，点击 “Launch” 运行。

  6. 在模拟器地址栏输入 opera:debug，见到以下页面，因为是本机调试，IP 地址和端口号用默认即可，点击连接。

  7. 出现以下页面代表连接成功。

  8. 在模拟器打开一个页面，在 Dragonfly 右上点击 “选择环境”，下来菜单中选择模拟器打开的页面。

  9. OK，可以在电脑上调试手机网页啦～ 在 Dragonfly 选择元素，模拟器可以看到所选区域变化。

  10. 在 Dragonfly 修改元素的样式，模拟器立即生效，同样修改 JS 也会立即生效。


方式二、 通过 Wi-Fi 连接进行远程调试

方式一涵盖了远程调试的大体步骤，但 Wi-Fi 连接方式更能体现远程调试的优越性。

  1. 手机和电脑连接同一 Wi-Fi 地址。
  2. 电脑打开 Opera，“Ctrl + Shift + i” 打开 Dragonfly，点击 “远程调试设置”。

  3. 端口可以默认，点击 “应用” 出现以下页面。

  4. “cmd” ― “ipconfig” ― 找到电脑的 IP 地址，记下来备用。

  5. 打开手机安装的欧朋 HD，地址栏输入 opera:debug，回车，出现以下页面，在 IP 地址处填入电脑的 IP 地址，点击 “连接”。


  6. 显示 “断开连接”，OK 连上了，Enjoy debuging～ 剩下的调试可以参照方式一的 8-10 步骤。

参考资料

二、Firefox and Firefox for Android 远程调试

首先远程调试需要桌面版的 Firefox 和移动版的 Firefox，手机通过 USB 线连接电脑。（Firefox 15+ ，Android 2.2+ 才支持远程调试)

  1. 首先确保你的桌面版浏览器是 Firefox 15+。

    firefox edition

  2. 在桌面版 Firefox 地址栏输入 about:config，会提示你确认，点击 “我保证会小心”。

    firefox_about_config

  3. 在出现的列表搜索框输入 “remote-” 进行筛选，找到 “devtools.debugger.remote-enabled”，双击把值置为 “true”。

    remote

  4. 重启桌面版 Firefox，在 “菜单” ― “工具” ― “Web开发者” 中多了一项 “远程调试器”。

    remote tools

  5. 打开手机版 Firefox（建议装最新版），查看版本，“菜单” ― “Settings（设置）” ― “About Firefox”，当前最新是 Firefox 15.0。
  6. 地址栏输入 about:config，搜索框输入 debugger，点击 “Add a New Setting”，弹出的框都选择 OK 或取消。

  7. “devtools.debugger.force-local” 点击 “toggle” 置为 “false”，“devtools.debugger.remote-enabled” 点击 “toggle” 置为 “true”，开启了移动版 Firefox 的远程调试（“devtools.debugger.remote-port” 调试端口号可以设置，默认为 “6000”）。

  8. 找到手机所连 Wi-Fi 的 IP 地址，一般步骤：“系统设置” ― “点击连接的 WLAN” ― “IP 地址”（不同的手机步骤稍有不同）。
  9. 重启移动版 Firefox，随意打开一个网址，同时打开桌面版 Firefox，点击桌面版 Firefox 菜单：“工具” ― “Web开发者” ― “远程调试器”，弹出对话框，把 “localhost” 换成以上找到的 Wi-Fi IP（电脑和手机必须连接同一个 Wi-Fi），点击确定。

    link

  10. 连接成功的话，手机会弹出对话框，点击 OK。

  11. 随后，在桌面版 Firefox 即能看到手机网页的 Javascript 文件，可以设断点调试了。

    success

缺点：貌似只能调试 JS，手机访问新的网页，刷新页面都需要重新建立连接……

参考资料

三、Chrome and Chrome Mobile 远程调试

准备工作：

  1. Android 设备通过 USB 连接电脑，要访问 Android 设备还需要 Android Debug Bridge(adb)，先前安装的 Android SDK 中包含此款命令行工具。在 Windows 中点击 “开始” ― “运行” ― “cmd” 找到 Android SDK 里的 platform-tools 目录。

    platform-tools

  2. 在移动设备上打开 Chrome，“设置” ― “开发人员工具” ― “启用 USB 网页调试”。

  3. 在 Windows 下输入 adb devices 看下面的列表中有没有你的机器，如果没有检查一下 Android 设备的 USB 调试是否打开。

  4. 在 platform-tools 目录下输入：adb forward tcp:9222 localabstract:chrome_devtools_remote

  5. 在桌面版 Chrome 输入 localhost:9222，页面出现移动版 Chrome 访问的页面。

  6. 点击 “inspectable pages” 下面的任一页面进入调试页面，移动设备页面可以在桌面调试了。

缺点：准备工作有点多，需要掌握adb 命令，学习成本高，最要命的 ― 最后的调试页面 “appspot.com” 需要代理才能访问……

参考资料

总之，以上介绍了多种远程调试方式，至于哪个好用，需要在实践中验证，我个人推荐 Opera 的远程调试，步骤不复杂，调试功能强悍。

傻仔刚普拉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PC端使用chrome浏览器远程调试android webview
weixin_45365889的博客
08-16 595
chrome的开发工具中提供了远程调试android webview的工具，使用步骤如下： 1.在PC端chrome浏览器中选择视图->开发者->开发者工具，在开发者工具界面右上角选择more tools->remote devices 2.这时候会在下方显示通过USB连接的android设备 3.Android4.4以后,需要WebView下设置支持远程调试,...
Chrome远程调试手机端UC浏览器(1)，精选
2301_79055083的博客
04-03 789
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽，有些是真的要去记。
3大mobile浏览器远程调试
weixin_30451709的博客
11-11 169
转自:http://dev.oupeng.com/articles/remote-debugging-with-browsers 做移动互联网开发呢，比较头疼的可能就是调试问题了，我是这么感觉的。因此，我对市面上比较流行的远程调试方法做了总结，对比了 Firefox、Chrome、Opera 三大浏览器的远程调试工具，大家各取所需，希望能对大家的日常工作有多帮助。 一、Opera 远程调试 ...
手机浏览器远程调试_如何调试远程浏览器
Web 开发&软件开发
08-09 662
如何调试远程浏览器 当错误仅在远程浏览器中弹出时，这非常令人沮丧。 关于该用户，该设备或该环境的某些信息有所不同，但我不知道是什么！ 当然，我不能在本地开发计算机上重新创建它。 TrackJS团队提出了一种很酷的方法来连接和调试这些我们称为RemoteJS的远程浏览器。 RemoteJS是一项免费服务，您可以在其中将简化JavaScript调试器附加到远程浏览器。 调试器提供了一个远程...
Chrome远程调试
Struggling_Jeff的博客
05-07 4106
Chrome远程调试。
seleniuim chromedriver 固定chrome浏览器端口以及远程调试（windows & linux）python
Damonhaus的博客
06-12 5116
想要浏览器稳定些，可以在页面长期挂着一个浏览器，然后driver 通过端口连接，进而获取数据，接下来通过chrome浏览器，chromedriver进行实
聊一聊如何基于Chrome Devtools 进行远程调试
前端达人
08-13 1034
看来远程调试是一大痛点。介绍了一个基于 Chrome Devtools 的远程调试工具，可以让前端开发者更好地调试远程 web 页面。今日文章由腾讯前端工程师 @Linkpan 分享。Devtools-Remote-Debugger 正如其名，是一个基于最新版 Chrome Devtools 开发者工具构建的 Web 远程调试工具。它能够让 Web 开发者使用最熟悉的 devtools 调试工具来...
RemoteConsole:在远程浏览器上调试 HTML 页面
06-30
远程浏览器上的 Web 调试工具 某些移动设备也不支持经典的调试控制台（safari 和 chrome，在您的桌面上连接移动设备）和代理。 所以在这些情况下，调试似乎是不可能的.. 这就是远程控制台诞生的原因，它允许您查看...
JS使用Chrome浏览器实现调试线上代码
10-15
**JS使用Chrome浏览器实现调试线上代码** 在前端开发过程中，线上环境出现的bug往往与开发和测试环境有所差异，为了高效地定位并解决问题，使用Chrome浏览器进行线上代码调试显得至关重要。本文将详细介绍如何利用...
volcan:firefox远程调试协议客户端
06-20
火山 用于远程调试 Firefox 的库。 它根据它所连接的 Firefox 上存在的功能生成所有客户端。 库比 idomatic node 有更多的 DOM API 感觉，因为它最初是为 firefox add-ons SDK 设计的，但与 nodejs 兼容。 用法 var volcan = require ( "volcan" ) ; var Port = require ( "volcan/port" ) ; // In case of node.js you would create connection to a firefox // using tcp port. In case of firefox add-on you will be given // equivalent port instance. var port = new Port ( 8060 , "loc
在Web浏览器中远程调试您的iOS应用程序.zip
09-24
本文将详细介绍如何使用Web浏览器远程调试您的iOS应用程序，这将极大地提高开发效率，特别是在处理网络请求、JavaScript代码或者进行跨平台调试时。 首先，我们需要了解这个开源项目——"HttpServerDebug-master"。...
极简主义的远程文件浏览器Mikochi
wbsu2004的博客
06-12 9060
Mikochi 是一个极简主义的远程文件浏览器。
局域网内浏览器实现远程控制windows设备的解决方案
向技术大牛致敬
02-24 2016
主要用于展厅内的设备控制，包括小屏控制大屏，一屏多显，多屏同步功能。
谷歌Chrome浏览器就能远程控制安卓手机，电脑远程控制手机的快捷方法get！
AirDroid_cn的博客
09-26 3955
在浏览器就能远程控制安卓手机或平板，并且还可以管理手机、平板里的文件，这招从电脑远程控制手机的快捷方法，你又怎能错过？
谷歌远程调试解决方案
m0_56516186的博客
06-17 1065
Chrome远程调试WebView是一种常用的调试技术，可以帮助开发者在WebView中调试H5页面
使用Xdebug进行远程调试
weixin_33716557的博客
09-12 342
为什么要用？ 方便联调： 和客户端一起联调，是die(); exit(); 会影响其他人员是使用。 关注数据变化： 正常情况下，我们在调试和开发时，更关注数据的变化。频繁断点、效率比较低。 简单： 之前的开发自己比较懒，一直没用，用起来发现很简单。 原理 运行xdebug需要客户端IDE（phpstorm）、远程服务器配合，首先是客户端配置好端口，发送debug请求，请求会通过浏览器或者IDE...
关于谷歌远程调试
qq_38476088的博客
02-06 310
很多时候我们在写h5页面功能的时候，会遇到一些bug，调试起来只能alert弹，不是特别方便，这个时候就需要掌握远程调试方法，会方便很多，下面为各位亲讲解一下  关于 谷歌远程调试的 一些小技巧； 首先安卓手机和苹果手机是不一样的； 相对来说 苹果手机很简单很多，不累述； 讲安卓机； 首先准备安卓机的数据线，插入电脑usb插口； 手机和电脑都需要安装 谷歌浏览器（之前微信也可以调试，但是
解决Chrome浏览器远程调试打不开的问题
rmtwealth的博客
12-11 3777
Chrome 远程调试不能运行的问题
html+css+js网页设计 个人博客模版 4个页面
最新发布
08-28
预览地址：https://blog.csdn.net/qq_42431718/article/details/141647657 html+css+js网页设计 个人博客模版 4个页面
chrome driver 远程调试
09-02
Chrome Driver远程调试是通过使用Chrome浏览器的远程调试功能来调试Chrome Driver驱动程序的一种方法。通过远程调试，您可以在浏览器中查看和修改页面的各种信息，如Cookies、Local Storage等。这对于调试和测试网页应用程序非常有用。 要进行Chrome Driver远程调试，您需要按照以下步骤操作： 1. 打开Chrome浏览器的调试设置页面，可以在地址栏输入"chrome://inspect/#devices"来访问。 2. 点击"Configure"按钮，设置监听的端口号。比如，您可以设置为11010，并点击"Done"保存设置。 3. 控制程序打开Chromium浏览器。 4. 在Chromium浏览器中查看需要调试的页面，这样您在Chrome浏览器中也可以看到相同的页面。 5. 在Chrome浏览器中点击"inspect"，进入F12开发者工具页面，您可以查看和修改页面的Cookies、Local Storage等信息。 6. 您还可以使用命令"netstat -ano"来查看指定端口是否与Chromium浏览器对应。 注意，如果您使用的是Chrome驱动程序，您可以在命令行中执行"chrome.exe --remote-debugging-port=xxxx"来启动远程调试功能。而如果您使用的是Chrome浏览器，您可以在命令行中执行"chrome --remote-debugging-port=xxxx"来启动远程调试功能。 综上所述，通过Chrome远程调试功能，您可以在Chrome浏览器中查看和修改页面的各种信息，从而实现对Chrome Driver驱动程序的远程调试。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Chrome远程调试](https://blog.csdn.net/Struggling_Jeff/article/details/130548198)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [解决Chrome浏览器远程调试打不开的问题](https://blog.csdn.net/rmtwealth/article/details/128272248)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值