草庐IT

使用 PC 端浏览器开发者工具对移动端真机环境 Web 页面进行远程调试

飞仔FeiZai 2023-03-28 原文

Mac/Windows 浏览器开发者工具远程调试 iPhone/Android 页面

在移动端 Web 开发中，有时候只通过模拟器进行调试是不够的，需要在真机环境下进行调试才能发现并解决一些问题。而移动端真机环境浏览器没有开发者工具，在这种情况下，使用 PC 端浏览器开发者工具对移动端真机环境的 Web 页面进行远程调试就显得尤为重要。

以下是一些可能需要使用 PC 端浏览器开发者工具对移动端真机环境的 Web 页面进行远程调试的场景：

  1. 问题只出现在某些特定型号或版本的移动设备上，需要在真机上进行调试才能找出原因。

  2. 需要对移动端页面的性能进行测试和调优，以确保其在移动设备上的流畅性和响应速度。

  3. 需要在移动设备上测试一些移动特有的功能，如触摸、手势等，以更加准确地模拟真实用户的体验。

  4. 需要在真机上查看页面的实际呈现效果和布局，确保它们与预期相符。

总之，使用 PC 端浏览器开发者工具对移动端真机环境的 Web 页面进行远程调试可以提高调试效率和质量，从而确保移动端 Web 应用程序的稳定性和用户体验。

一、Mac Safari 浏览器开发者工具远程调试 iPhone 页面

要在 Mac 上使用 Safari 浏览器的开发者工具远程调试 iPhone 页面，请按照以下步骤进行操作：

  1. 在 Mac 上启动 Safari 浏览器，并选择“Safari”菜单中的“偏好设置”。在“高级”选项卡中，启用 在菜单栏中显示“开发”菜单。

  2. 确保 iPhone 和 Mac 连接到同一个 Wi-Fi 网络（或将 iPhone 通过数据线连接到 Mac 上），并在 iPhone 上打开 Safari 浏览器，并访问目标站点。

    需要注意的是，要通过 Wi-Fi 网络进行连接的前提是：需先通过数据线进行连接，将选项“通过网络连接”勾选上，然后可以通过同一个 Wi-Fi 网络进行连接。

  3. 在 Safari 菜单中，选择“开发”➤“iPhone 名称”➤“网页名称”。如果 iPhone 没有出现在菜单中，请确保在 iPhone 上启用了 Safari 的“Web 检查器”（设置 ➤ Safari 浏览器 ➤ 高级 ➤ Web（或网页）检查器）。

    启用 Web 检查器

  4. 打开“Web 检查器”窗口后，可以使用其中的各种工具进行调试。例如，在“元素”选项卡中，可以查看和编辑网页的 HTML 和 CSS 代码，以及在“控制台”选项卡中查看 JavaScript 错误和调试信息。

请注意，为了使远程调试正常工作，建议 iPhone 上的 Safari 浏览器是最新的版本，并且 Mac 上的 Safari 浏览器也是最新版本。此外，如果遇到连接问题，可以尝试在 iPhone 上打开“设置”>“Safari 浏览器”>“高级”>“Web 检查器”，并确保“Web 检查器”选项已启用。如果仍然无法连接，请尝试重新启动 Safari 浏览器或 iPhone，或者使用数据线连接 iPhone 和 Mac。

二、Windows Chrome 浏览器开发者工具远程调试 Android 页面

要在 Windows 上使用 Chrome 浏览器的开发者工具远程调试 Android 页面，请按照以下步骤进行操作：

  1. 在 Windows 上启动 Chrome 浏览器，并在地址栏中输入“chrome://inspect/#devices”。

  2. 通过数据线将 Android 设备连接到 Windows 设备。

  3. 启用 Android 设备开发者模式：选择设置 ➤ 关于手机 ➤ 版本号，通过连续轻触版本号七次（不同设备可能有不同的操作方式），以启用 Android 设备的开发者模式。

  4. 启用 Android 设备 USB 调试：在 Android 设备上，选择 设置 ➤ 开发人员选项（不同设备可能有不同的操作路径），然后启用 USB 调试。

    由图可知，连接的 Android 设备以展示在列表中。

    如果遇到连接问题，请确保 Android 设备已启用 USB 调试功能，以便电脑可以识别设备。还可以尝试断开并重新连接设备，并确保电脑上已安装了正确的 USB 驱动程序。

  5. 在 Android 设备打开 Chrome 浏览器。

    如图，Android 设备端打开的 Chrome 浏览器展示在下方的列表中，并显示了 Chrome 的版本号和标签页等信息。

  6. 在 Android 设备打开的 Chrome 浏览器中访问目标站点。

  7. 单击“inspect”按钮，这将打开 Chrome 开发者工具窗口，可以在其中进行调试。例如，在“元素”选项卡中，可以查看和编辑网页的 HTML 和 CSS 代码，而在“控制台”选项卡中，可以查看 JavaScript 错误和调试信息。

    在这个视图中，Android 设备显示的内容被镜像投射到 Windows 设备上，开发者工具分析的是 Android 设备的当前页面，而不是 Windows 设备浏览器上的活动会话

    当 Android 设备已连接，并且开发者工具在 Windows 设备上打开时，请尝试对移动网络连接的加载时间进行基准测试，或使用 Performance 面板查看 Android 设备上的页面性能等。

WebPC642487AndroidimgHtml/Css

有关使用 PC 端浏览器开发者工具对移动端真机环境 Web 页面进行远程调试的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  8. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  9. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  10. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

随机推荐