Chrome 网页调试技巧

更新于 2017-12-28  约 9 分钟

Chrome

网上有个笑话,说 Chrome 是披着浏览器皮的操作系统。虽然只是一句玩笑话,但是也反映了 Chrome 功能较多的事实。

这篇文章的主题是 Chrome 如何调试网页,ionic 的也适用。因为 Chrome 功能非常多,我仅把最常用的功能列出来进行分享。文章结尾有彩蛋。

准备材料

Chrome 浏览器
http://www.google.cn/chrome/browser/desktop/

这个地址是官方的,应该没有被墙。不要再去乱七八糟的网站下了。

正文

首先拿百度举例。

运行 Chrome,打开百度首页。右键检查可打开调试面板,快捷键如下:

功能/平台 Windows Mac
打开/关闭 DevTools F12、Ctrl + Shift + I Command + Option + I
打开 DevTools Ctrl + Shift + C Command + Option + C
查看鼠标指向的元素

就是鼠标指哪显示哪里的元素,右侧按钮是开关

手机模式

可以模拟手机的运行,左侧按钮可以切换手机型号,右侧按钮可以 打开/关闭 手机模式

手机模式

Elements

左边是 HTML 源码,右边是 CSS 样式。可以手动修改、禁用一些 CSS 样式进行查看

Console

控制台输出的 console.log 等都会在这里显示。百度这里还有个招聘信息,感兴趣的可以试试 :)

Sources

这个我主要用来打断点。Command + P 搜索到你要找的文件,并打断点。Windows 里应该是 Ctrl + P 吧。

比如一个 ionic 项目,我们要给 app.component.ts 这个文件打断点调试,直接找到该文件,打断点运行。这个在 debug 的时候非常好用。

Network

查看一些网络请求。分别会列举名字、状态码、类型、大小、加载耗时等。

HTTP 状态码这里简单列举一下不同字头的意思:

消息(1字头)
成功(2字头)
重定向(3字头)
请求错误(4字头)
服务器错误(5字头)

再放个完整版:
HTTP 状态码大全

接下来我们点击 ? 图标清除一下已显示的数据。并点击百度顶部的新闻按钮,并在 Network 中选择 XHR(XMLHttpRequest),就可以看到他的 XHR 网络请求。右下侧可以选择 Headers、Preview、Response 等。

这里不过多讲解,想深入了解 HTTP 相关知识的,可以去看看《图解HTTP》

调试安卓应用 Web 页面

拿一个我的 ionic Demo 举例。

1.打开 USB 调试、允许文件传输
2.手机装上你要测试的应用
3.在 Chrome 复制进这段话
chrome://inspect/#devices
4.运行该应用

首次使用 inspect 的时候,有可能会出现画面空白的问题。原因是 Chrome 需要下载一些工具,翻墙使用一次后即可解决

你会在网页上看到你正在运行的应用,我们点击 inspect

接下来就会在网页上打开你手机的应用,你可以通过点击网页来控制手机,右边的功能和前面讲的操作技巧一样,可以打断点、看网络请求等。缺点是可能有点卡

inspect

彩蛋

在最后分享给大家几个实用的工具。

比如 ionic 中文资料太少,找起来还是 Google 方便。

  • Chrome拓展程序:AdBlockPlus

屏蔽广告的神器,更多工具 -> 拓展程序 里,搜索 ad 应该就能找到他了,如果被墙了用上面那个改 hosts 的就能解决。

使用前

使用后

临时找的图,这还不算明显的,有的网站使用前后那叫一个夸张。这个扩展还有一个好处,他可以自定义过滤元素,遇到漏网之鱼手动屏蔽之后会记录起来的。

  • Chrome拓展程序:Infinity新标签页

以前不爱用 Chrome 就是他打开新标签页不太习惯,这个插件完美解决了这个问题。包括图标自定义,界面自定义都很好用。不多介绍,试一试吧,适合自己的才是最好的。

阅读 6.2k更新于 2017-12-28

推荐阅读
目录