使用 Chrome 进行 Debug

本不该存在的章节

本节内容,原是不该存在的;一个工具拿到手,自己直接尝试着使用,是最好的。
哪怕只使用到主要功能的百分二三十,也好;随着逐渐深入,涉及到的内容,自然会更多。
有时候百分二三十的功能,也足以了;如同我们去学习编程一般,待技艺成时,也会变得谦虚,『所知』与『未知』相比,毕竟九牛一毛,最多也不过那百分之二三十,只是略多了一种别人没有的技术思维

如果课程刚开始,直接把人一脚往门里踢,『自己尝试着学会』,确实有些残忍。
故本文针对 Chrome 浏览器的 Debug (右键点击网页,选择 Inspect/检查 可达),附了些截图与说明。

概览 (Elements)

Elements 这栏,默认情况下是左侧为 Dom 树,右侧为 样式属性
Dom 树上的元素,点击左侧的小箭头 可以展开、收起内部的子元素,如果只是鼠标悬浮,每个 Dom 元素会对应到页面上的最终视觉。如果鼠标点击,则是选中当前的 Dom 元素,右侧的 样式属性区 内容会对应发生变化。

样式属性区 中,可以看到当前元素的各个样式规则,最终表现的视觉,是这么多规则合并在一起的结果,如果有优先级的冲突,在样式属性区 某个属性会显示为删除线
Styles 是页面内所有样式的规则集合,Computed 是最终计算后的结果,可以理解为这么多规则合并了的结果。
Styles 中的顶部还有个默认的 element.style,是指当前 DOM 元素上 style 的属性,它的优先级默认是最高的,可以在 Debug 窗口内直接进行修改(效果是临时的,页面刷新后失效);除了 element.style 之外,其它 CSS 对应的规则也可以直接修改。
我们注意截图中的 小绿圈,它表示当前规则位于具体哪个 CSS 文件内,点击之后会跳转到对应的 Sources 内对应文件的源码中。(这其实是重要的一个小技巧!)

除了在 Dom 树通过鼠标悬浮的操作去探测代码中的 Dom实际视觉的关联,我们注意图中的 小红圈,点击它,可以切换元素探测的模式 (一般来说并不大用到),它被激活后,可以直接在页面上点击,然后看到对应 DOM 元素的一些属性,同时 Dom 树 内也会自动聚焦到对应的元素,如下图所示:

上面截图中有一个小细节,是 Contrast (对比),如果它的值比较小,说明这个颜色在屏幕中显示不够醒目的;很多年前,LED 屏显示器都不太普及的时候,Contrast 的概念非常重要,比如截图中这个颜色 #BBBBBB 在糟糕的显示器上,基本上就不可见了。现在来说,倒不算什么很重要的事情,自己注意下就好了;当然,如果面向特定对象开发,比如最终用户(客户)要在糟糕的显示器上浏览,那么自然也是重要的……

修改 Elements

上文中,我们说到 样式属性区 可以对样式进行直接的修改,同样,在 DOM 树 内,我们也可以直接对 HTML 的源码进行修改,如下图所示

有些时候,需要临时调整 HTML 源代码,以获得最终的视觉效果,在 DOM 树 中直接操作是最快捷的。
还有比如未知原因导致页面出现滚动条,可能需要逐个 DOM 元素去排查,这时,直接在 DOM 树 中删除 (快捷键为 Delete 键) 一个(范围)大一点的 DOM 元素,看是否解决问题了,如果没有,就撤销删除 (Command+Z),然后再删除另外一个潜在的怀疑对象,并逐步缩小范围,直到找到可疑的 DOM 元素为止。

Sources


Sources 是指各种页面资源,主要包括 CSS 与 JS (Javascript) 文件。一般情况下,CSS 文件在这里只是 能看到源码 的效果,而对 JS 文件来说,则特别重要,因为它可以给 JS 文件加 断点 进行 Debug。
断点 的意思是程序运行到这里了,停下来,容我们看看当下内部有什么变量,出了什么状况,还可以在当前断点截断的状态下,直接再输入一些代码进行执行去确认效果。而 CSS 不属于 程序 的范畴,所以,它没有 断点 的概念。
如果将 HTML、CSS 算作编程语言,确实比较勉强,而 Javascript 则是正统的脚本语言,在进行 Debug 的时候要和 断点 相互配合。只有不方便添加 断点 的时候,才会直接打印(显示) 一些变量以供参考。

Console

这里就不具体介绍了,简单来说,就是执行 Javascript 用的。
如果对于本课程的内容,打算是了解个大概,或者未来不太想碰 Javascript 的,Console 将会很少用到;反之,Console 则是一个必备的功能。
有些网站,也喜欢往 Console 里打印(显示)一些内容,比如进行招聘,留一个收简历的邮箱地址。毕竟不是普通用户能看到的,即使是百度,你也可以试试,看它在 Console 里打印了什么。

Network

Network 也是非常重要的一部分,它记录了当前页面涉及到的各种请求 (Request)。一个页面除了 HTML 本身之外,还有其它前端资源。

点击一个请求,会是新的界面模式,我们先看 Timing 这一栏,它记录的是当前请求的时间消耗,一般情况我们不会用到这里,但是在进一步追踪速度问题 (除了客户端浏览器之外跟服务器端也有很大关系) 的时候,它就很有用了,截图如下:

Request/Response (Network)

同样是 Network 的界面,但除了 Timing 之外,还有 Headers、Preview、Response 三栏。最重要的是 Headers,它可以让我们对当前的 Requet/Response 的状态更清楚。

General

Request URL: 当前请求的 URL
Request Method: 一般是 GET 或 POST
Status Code: HTTP 的状态码,200 OK 表示正常,404 表示无法找到 .etc
Remote Address: 远端(也就是服务器)的 IP,截图里的是一个本地的测试页面,正式网站,一般是 <IP>:80<IP>:443:80 是 HTTP 的 80 端口,而 :443 是 HTTPS 的 443 端口。

注: 有时候一个域名解析是否生效了,即使你在命令窗口 ping 的时候确定生效的,而浏览器里的 Remote Address 可能仍然是旧的记录,所以,Remote Address 也是可以用来判断,当前的 DNS 解析的缓存是否还在起作用;如果不是缓存的原因,那就是 DNS 设置错误了。

截图中显示的 Remote Address127.0.0.1:9765,其中127.0.0.1特指本地的 IP,也叫 localhost。而 localhost127.0.0.1 的(默认)关联是通过 /etc/hosts 来实现的,我们在命令行窗口中执行 cat /etc/hosts,就能看到这个映射关系:

Response Headers

Resposne 是服务器端返回数据给浏览器,除了 Content-LengthContent-Type 必要的两字段,其它其实都可以在服务器端返回的时候,另行额外地赋予。
服务器端如何向客户端设定 Cookie 呢?也是通过 Response Henaders 实现的。

Request Headers

Request 是 浏览器端向服务器发送请求信息 的意思,大白话可简化为: 打开网页
这里的一些属性,对服务器端处理缓存相关的逻辑很有帮助;另外当前页面内的 Cookie 也是在客户端(浏览器)发出请求的时候,直接压到 Request Headers 往服务器端传送。

有时人们为了节省 Request Headers 的大小,会对应一些的办法,比如静态的前端资源在另一个域名下,就不用处理 Cookie 了,可以节省 Cookie 在每次 Request 时候造成的带宽浪费。
而实际上呢,确保不要滥用 Cookie 就好了,没有必要优化到每个细节,看似没错,但终归也需要消耗工作时间,却收益不高,毕竟就那么一丁点的数据传输量。