PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页

时间:2024-04-02 07:40:06

PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页

最近学习移动端网页开发的时候,遇到了一个问题,如何在真机上看到控制台输出的内容。
虽然现在的桌面浏览器提供了模拟手机的功能,但是还是有些场景模拟不了真机,比如说手机的多点触控,桌面浏览器由于只有一个鼠标,所以无法模拟出手机上的多个手指触摸
于是上网百度,找了一些诸如Ghostlab之类的应用,但是调试效果不是很好,后来找了半天终于找到了解决办法,不过网页说明太乱,看了半天再加上自己摸索,终于是搞起来了。
原来chrome已经为移动开发者们准备好了这些功能,只是我没发现而已,简明扼要记录一下,避免大家再浪费时间去理解。


废话不多说,上步骤:

手机端需要做的事

  1. 手机上下载chrome浏览器
  2. 手机开启“开发者模式”
    具体步骤各个品牌手机不太一样,华为手机为例:
    • 打开手机上的 “设置” 图标,
    • 进入最下方 “系统” 选项,
    • 再点击最上方 “关于手机”,
    • 接着连续点击 “版本号” 7 - 8 次左右,就可以开启 “开发者模式”。
  3. 返回上一级目录,可以在下方找到 “开发人员选项” ,进入之后找到 “USB调试” 这一项,开启它即可
  4. 切换到手机chrome浏览器, 打开一个网页
  5. 用USB把手机连接上电脑

PC端需要做的事

  1. 打开chrome浏览器,地址栏输入 chrome://inspect 并回车,可以看到如下界面:
    PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页
    可以看到 Offline 那里提示 需要接受debugging
  2. 打开手机,提示框点确定,允许进行USB调试
  3. Offline 那里就变成了下图所示
    PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页
    手机上正在浏览的网页,这里就可以看到了,然后下方有两个按钮 inspectinspect fallback ,点击即可进行调试(我这里由于手机版浏览器版本高于PC端, 所以提示使用 inspect fallback 来进行调试)
  4. 点击按钮后会弹出一个新的窗口,如图所示
    PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页
    新窗口左侧是手机页面实时预览,右侧即是调试窗口,手机端的操作与这个窗口是相互影响的,两端的任何操作都会在另一端同步显示,
  5. 接下来就可以愉快地调试手机网页了 ^_^。

另外,补充一个小知识点,如何用手机访问电脑上正在开发的本地网页