阅读 496

前端调试工具的使用(踩坑之路)

前端调试工具的使用(踩坑之路)

一、移动端浏览器环境介绍

  1. 安卓 关于安卓系统下的移动端webView目前分为两种内核:原生浏览器内核、腾讯X5浏览器内核。两种内核,这里就涉及到一个配置,需要安卓原生的webView支持debug调试。如下: WebView.setWebContentsDebuggingEnabled(true); 这样才能够继续我们本文接下来的操作。 如果不具备允许调试的能力请参照该文章:blog.csdn.net/zhulin2609/…
  2. IOS 关于IOS系统下的webView呢,全部都是safari内核,这样我们接下来进行对应的操作即可。

二、debug工具介绍

  1. inspect inspect是一个内置于chrome的远程调试指令,它支持调试所有移动端基于chrome内核的webview的调试,方便我们在通过抓包的方式无法排查问题的时候,可以用它来链接手机进行调试、查看命令行和网络接口,甚至于打断点。方便我们进行代码的调试,排查问题。(注:只用于调试安卓
  2. safari开发工具 safari开发工具是一个内置在PC端的safari浏览器中,开发工具模块,功能与inspect一致,区别是inspect提供了一个webview可视窗口。(注:只用于调试ios

三、debug工具使用

  1. Chrome://inspect

    1. adb安装 通过brew来安装一下adb命令: brew install adb
    2. 打开inspect 打开谷歌浏览器输入以下地址:chrome://inspect/#devices 进入到devices页面
    3. 链接设备 通过数据线链接要调试的安卓设备 通过开发者模式打开设备的USB调试并允许PC调试该设备
    4. 打开对应的webView 打开以后即可在chrome://inspect/#devices页面看到当前的webview页面地址,点击inspect,打开页面的调试窗口即可开始调试。 注:chrome的inspect为谷歌的开发者工具,需要翻墙才能访问,需要访问https://chrome-devtools-frontend.appspot.com进行对应调试资源的下载,所以要确保当前网络环境可以访问该地址才可以正常调试。
  2. Safari的开发工具

    1. 打开safari浏览器开发者模式 正常再PC的safari的菜单栏里有开发选项,如果没有请参考以下链接进行设置: jingyan.baidu.com/article/6da…
    2. 链接ios设备 通过数据线链接要调试的ios设备
    3. 配置ios设备 连接设备后,打开系统设置->safari浏览器->高级->网页检查器->打开->PC浏览器点击开发->找到调试设备->点击用于开发->调试设备上点击信任
    4. 开始调试 打开设备对应web页面,在PC浏览器中找到对应页面,然后点击进行对应调试

四、TBS相关调试权限开启

  1. 如何使用inspect或safari开发工具调试微信内部页面
    1. 授权,打开地址debugmm.qq.com/?forcex5=tr…
    2. 微信中打开debugx5.qq.com
    3. 点击信息,即可查看对应需要授权的功能
  2. 如何打开小程序的vconsole功能 同上的2.3步骤,点击信息后勾选对应打开的权限即可
  3. 如何查看当前x5内核版本及相关更新 访问地址debugtbs.qq.com

作为一名前端工程师,这些调试工具的具体使用就不过多赘述了,希望大家慢慢探索,当然功能基本和chrome的检查是一样。