Chrome 网页调试技巧

最新推荐文章于 2024-05-14 14:35:01 发布

weixin_33779515

最新推荐文章于 2024-05-14 14:35:01 发布

阅读量105

点赞数

原文链接：https://juejin.im/post/5a44a00c6fb9a0451f313e2b

版权

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

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

Chrome 浏览器
www.google.cn/chrome/brow…

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

首先拿百度举例。

运行 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》。

拿一个我的 ionic Demo 举例。

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

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

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

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

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

修改 hosts 上 Google 查资料 比如 ionic 中文资料太少，找起来还是 Google 方便。
Chrome拓展程序：AdBlockPlus 屏蔽广告的神器，更多工具 -> 拓展程序里，搜索 ad 应该就能找到他了，如果被墙了用上面那个改 hosts 的就能解决。

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

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

关注