使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)

前言

移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试也由于 safari 的打通变得很方便。而 Android 系统,尤其是国内环境下的 Android 系统,由于版本跨度大,且各家厂商采用自研内核,使得其成为移动端页面问题出现的主要平台。工程师们采用了各种各样的方式来对其进行调试:alert 大法,页面引入或注入VConsole/eruda开启移动端控制台,Fiddler / Charles / Whistle抓包,Weinre......,各种解决方式层出不穷,但随着国内厂商积极的更新内核和旧版本Android机型的逐渐淘汰,在当前节点下,我们只需要做一点微小的工作,就可以使用我们最熟悉的 Chrome 开发者工具对移动端页面进行调试。
这篇文章主要讲述使用 Chrome 开发者工具调试 Android 终端内的各种 webview 环境下页面的方法,主要包含以下环境:
  • Chrome 等基于原生 Chromium 内核的浏览器
  • 微信、QQ、QQ 浏览器等 X5 内核webview
  • UC 浏览器等 U4 以上内核 Webview
  • App 内嵌 Webview
  • 系统浏览器
如果你已经分别知道以上每种环境中开启 Inspect 调试的方法,这篇文章对你来说意义不大,可以选择关闭。但如果以上有你不知道如何开启 Inspect 调试的环境甚至你不知道 Chrome 的 Inspect 调试,可以继续往下看,应该会对你之后的调试工作有所帮助,Let's do it!

开启 Chrome 浏览器 Inspect 调试

在 Chrome 浏览器地址栏中输入 chrome://inspect/#devices 并回车,就可以打开 Inspect 调试界面,此时我们勾选 Discover USB devices 选项便可以看到设备列表。
然后打开手机中开发者选项并打开 USB 调试开关(具体方法自行百度,不同手机有一定区别),使用数据线将手机连接到电脑上,我们就可以在设备列表中看到自己的设备。
这时,如果你手机上安装了 Chrome 浏览器的话,随便打开一个网址(以掘金为例),设备列表中你的设备下便会出现你打开的页面。
 

此时我们点击 inspect 选项

看到这个熟悉的界面了吗?接下来你便可以和调试 PC 界面一样通过 Chrome 进行你所需要的调试,你在左侧屏幕上做的一切操作和你的手机上的操作会始终保持同步,如果你嫌左边这块多余,也可以关闭 Toggle Screencast 只保留控制台本身。

点击左上角箭头,然后手指点击手机屏幕你要选择的区域,即可完成选取指定元素操作,其余的操作都和在 PC 上完全一样。
如果你之前没有使用过这种调试方式,你应该会感到相比之前的调试方式更加方便快捷
问题来了,Chrome 手机浏览器在国内市场份额非常少,我们的页面主要出现的地方也是微信,QQ,UC浏览器或者 App 内嵌等等,针对这些环境,如何开启 inspect 调试?下面我们逐一讨论。
 

微信、QQ、QQ浏览器等 X5 内核 Webview

X5 内核环境下,我们访问 debugx5.qq.com/
在这个页面中我们可以对 X5 内核进行配置(如非必要不建议改动配置),我们选择信息Tab并勾选“打开TBS内核Inspector调试功能”和“打开TBS内核X5jscore Inspector调试功能”两个选项,完成后重启页面生效
然后 inspect 页面就会自动刷新列表,这时我们就能对微信及 QQ 等 X5 内核 Webview 进行调试

UC 浏览器等 U4 以上内核 Webview

针对U4及以上内核,我们访问 plus.ucweb.com/download/,便可下载中文版及国际版 UC 浏览器的对应开发版
然后我们在 UC 开发版中打开要调试的页面,和上面一样,我们也可以在列表中看到 UC 浏览器打开的页面并对其进行调试
 

App 内嵌 Webview

很多团队会采用 Hybrid 模式开发业务,针对 App 内嵌页面,我们需要 Android 同事协助打开 Webview 调试,具体方法为,
 
 
 
 
 
webView.setWebContentsDebuggingEnabled(true);复制代码
 
 
每个 webview 组件实例需要单独设置,开启后便可进行 inspect 调试

系统自带浏览器

针对 MIUI 自带浏览器(MIUI为例),我们需要刷入开发版系统,然后系统自带浏览器便可以通过 inspect 进行调试
以上就是在使用 Chrome 开发者工具调试 Android 端各种环境 Web 页面的方法,希望能帮助到你
 

如果文章对你有帮助,欢迎关注我的微信公众号(骄尔),不定期更新踩坑笔记,好用的工具和有趣的思想,谢谢!

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)的更多相关文章

  1. Chrome开发者工具调试详解

    chrome开发者工具最常用的四个功能模块:元素(ELements).控制台(Console).源代码(Sources),网络(Network). 元素(Elements):用于查看或修改HTML元素 ...

  2. 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试

    转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...

  3. 使用Chrome开发者工具远程调试原生Android上的H5页面

    Android4.4(KitKat)开始,使用Chrome开发者工具可以帮助我们在原生的Android应用中远程调试WebView网页内容.具体步骤如下: (1)设置Webview调试模式 可以在Ac ...

  4. 【译】在 Chrome 开发者工具中调试 node.js

    原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...

  5. 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧

    摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...

  6. 在 Chrome 开发者工具中调试 node.js

    命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...

  7. Chrome开发者工具 debug 调试

    Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为: Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素. Network 标签页:用于查看 HTTP ...

  8. Chrome DevTools开发者工具调试

    1-1 Chrome DevTools 功能简介 (九大功能面板) (1)Elements元素面板 检查和调整页面,调试DOM,调试CSS (2)Network网络面板 调试请求,了解页面静态资源分布 ...

  9. Chrome开发者工具之测试应用

    一.Chrome开发者工具简介 浏览器的开发者工具(DevTools)可以帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript.jQuery)之类的,还 ...

随机推荐

  1. Windows Server 2012安装密钥

    Windows Server 2012 Standard 密钥:NB4WH-BBBYV-3MPPC-9RCMV-46XCB Windows Server 2012 StandardCore 密钥:NB ...

  2. Sping Cloud hystrix.stream 自动发现-监控

    相关组件安装脚本 [root@java_gateway4 java_tps]# cat cront_install.sh #!/bin/bashyum install jq -ymkdir /home ...

  3. I/O系统(一)

    输入输出系统的发展大致可以分为4个阶段1.早期阶段 特点:    1.1每个IO设备都得有一套独立的逻辑电路和CPU相连.    1.2输入输出过程需要通过CPU,穿插在程序运行的过程中,处理IO时候 ...

  4. 题目--oil Deposits(油田) 基础DFS(深度搜索)

    上一次基本了解了下BFS,这次又找了个基本的DFS题目来试试水,DFS举个例子来说就是 一种从树的最左端开始一直搜索到最底端,然后回到原端再搜索另一个位置到最底端,也就是称为深度搜索的DFS--dep ...

  5. 134. Gas Station加油站

    [抄题]: There are N gas stations along a circular route, where the amount of gas at station i is gas[i ...

  6. 151. Reverse Words in a String翻转一句话中的单词

    [抄题]: Given an input string, reverse the string word by word. Example: Input: "the sky is blue& ...

  7. NPOI 导入为table 处理excel 格式问题

    ICell cell = row.GetCell(j); if (!cell.isDbNullOrNull()) { switch (cell.CellType) { case CellType.Bl ...

  8. 服务器重新启动,ftp重新连接问题

    服务器重新启动,发现FlashFXP无法连接了,估计是ftp没有启动, 1. 首先服务器要安装ftp软件,查看是否已经安装ftp软件下:   #which vsftpd   如果看到有vsftpd的目 ...

  9. PyCharm默认文件头部的设置

    PyCharm的设置 1.设置默认的文件头: 找到该路径并添加以下信息 File->settings->Editor->File and Code Templates->Pyt ...

  10. Laravel-nestedset that base left and right values tree package

    This is a Laravel 4-5 package for working with trees in relational databases. Laravel 5.5, 5.6, 5.7, ...