Chrome浏览器及调试教程

==>（微信公众号：IT知更鸟）欢迎关注<^>@<^>

Chrome浏览器及调试教程

　　在web开发过程当中，咱们在写JavaScript脚本时不免会遇到各类bug，这时，咱们就须要去调试咱们的JavaScript脚本，而后去修改代码。最简单的调试方法就是使用alert方法，将可信息经过alert方法的弹窗显示出来。可是，alert方法有几个弊端：

1）alert方法在弹出窗口时会中断程序；

2）在循环中使用alert（）方法时，若是不点击alert弹窗的肯定按钮，下一个alert就不会出现；

3）alert方法在显示对象时永远只显示[Object]，没法看到对象中的具体细节；

　　因为alert方法存在上述缺点致使了alert方法只适合一些小程序。若是想要查看JavaScript脚本的执行过程，HTTP请求信息，执行过程当中的数据信息则须要学会使用浏览器的开发者工具进行调试。

　　从如下几个方面来了解Chrome浏览器：

1.Chrome浏览器简介及下载与安装；2.浏览器加载Html页面的过程；

3.Chrome浏览器开发者工具面板的介绍；4.使用Chrome开发者工具调试JavaScript脚本；5.Chrome浏览器的其余设置；

---

 

1.浏览器简介

浏览器的主要功能：

　　浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展现您选择的网络资源。这里所说的资源通常是指 HTML 文档，也能够是 PDF、图片或其余的类型。资源的位置由用户使用 URI（统一资源标示符）指定。

　　浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C（万维网联盟）进行维护。

多年以来，各浏览器都没有彻底听从这些规范，同时还在开发本身独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。现在，大多数的浏览器都是或多或少地听从规范。　

　　因此，浏览器就是一个获取网页并将它显示给用户的工具。

浏览器界面介绍：

浏览器的用户界面有不少彼此相同的元素，其中包括：

用来输入 URI 的地址栏

前进和后退按钮

书签设置选项

用于刷新和中止加载当前文档的刷新和中止按钮

用于返回主页的主页按钮

浏览器的高层结构

浏览器引擎 - 在用户界面和呈现引擎之间传送指令。

呈现引擎 - 负责显示请求的内容。若是请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

网络 - 用于网络调用，好比 HTTP 请求。其接口与平台无关，并为全部平台提供底层实现。

用户界面后端 - 用于绘制基本的窗口小部件，好比组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操做系统的用户界面方法。

JavaScript 解释器。用于解析和执行 JavaScript 代码，就是后面讲到的JavaScript引擎。

数据存储。这是持久层。浏览器须要在硬盘上保存各类数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（可是轻便）的浏览器内数据库。

   目前使用的主流浏览器有五个：Internet Explorer、Firefox、Safari、Chrome 浏览器和 Opera。本文中以开放源代码浏览器为例，即 Firefox、Chrome 浏览器和 Safari（部分开源）。根据 StatCounter 浏览器统计数据，目前（2011 年 8 月）Firefox、Safari 和 Chrome 浏览器的总市场占有率将近 60%。因而可知，现在开放源代码浏览器在浏览器市场中占据了很是坚实的部分。

---

 

2.浏览器加载Html页面的过程

2.1  从输入URL到页面加载完成都发生了什么？

1.处理URL:输入 URL 后的「回车」，这时浏览器会对 URL 进行检查，首先判断协议，若是是 http 就按照 Web 来处理，另外还会对这个 URL 进行安全检查，而后直接调用浏览器内核中的对应方法，好比 WebView 中的 loadUrl 方法。

2.发送HTTP请求：由于网络的底层实现是和内核相关的，因此这一部分须要针对不一样平台进行处理，从应用层角度看主要作两件事情：经过 DNS 查询 IP、经过 Socket 发送数据，接下来就分别介绍这两方面的内容。

2.1 DNS查询：Chrome浏览器在启动的时候首先会去加载你本地的host文件，若是URL中的域名在host文件中设置的有对应的IP地址，就会直接将这个域名指向这个地址。若是host中没有URL中输入的域名（www.baidu.com）对应的IP地址，浏览器就会去访问DNS服务器，向DNS服务器询问这个域名（www.baidu.com）对应的IP地址。

2.2 经过Socket发送数据：有了 IP 地址，就能够经过 Socket API 来发送数据了，这时能够选择 TCP/IP 或 UDP 协议，HTTP 经常使用的是 TCP/IP 协议。Chrome此时就会使用TCP/IP传输协议，将URL中的信息经过HTTP协议发送到百度的服务器。

3.浏览器接受远程服务器响应的数据：远程服务器（百度的服务器）通常会返回给浏览器一个HTML（字节码数据）。浏览器接受到数据以后就对这些字节码数据以指定的编码格式进行解码。浏览器获取编码格式的途径：

1）用户设置，在浏览器中能够指定页面编码

2）HTTP 协议中

3）HTML页面中<meta> 的 charset 属性值

4.浏览器对HTML页面进行渲染和布局：

1).浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；

2).浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

3).浏览器继续载入html中＜body＞部分的代码，而且CSS文件已经拿到手了，能够开始渲染页面了；

4).浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

服务器返回图片文件，因为图片占用了必定面积，影响了后面段落的排布，所以浏览器须要回过头来从新渲染这部分代码；

5).浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；

6).Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。杯具啊，忽然就少了这么一个元素，浏览器不得不从新渲染这部分代码；

7).终于等到了＜/html＞的到来，浏览器泪流满面……

8).等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；

9).浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得从新来过……”，浏览器向服务器请求了新的CSS文件，从新渲染页面。

注：win10打开host文件的方法：在运行（win+R）中输入：C:\Windows\System32\drivers\etc便可

2.2  JavaScript引擎

2.2.1 JavaScript引擎是什么？

“JavaScript引擎”一般被称做一种 虚拟机。“虚拟机”是指软件驱动的给定的计算机系统的模拟器。有不少类型的虚拟机，它们根据本身在多大程度上精确地模拟或代替真实的物理机器来分类。

2.2.2 JavaScript引擎是干什么的？

JavaScript的基本工做就是将开发者写的JavaScript代码转换成能被浏览器理解甚至能在应用程序上运用的最优化的快捷代码。比方说，当你写了 var a = 1 + 1; 这样一段代码，JavaScript引擎作的事情就是看懂（解析）你这段代码，而且将a的值变为2。

2.2.3 主要的JavaScript引擎有哪些？

WebKit的JavaScriptCore 和 Google 的 V8 引擎。

2.2.4 JavaScriptCore和V8引擎解析源代码的过程

JavaScriptCore 执行 一系列步骤 来解释和优化脚本：

1）首先它进行词法分析，就是将源代码分解成一系列具备明确含义的符号或字符串。

2) 而后用语法分析器分析这些符号，将其构建成语法树。

3）接着四个 JIT（Just-In-Time）进程开始参与进来，分析和执行解析器所生成的字节码。

简单来讲，JavaScript 引擎会加载你的源代码，把它分解成字符串（又叫作分词），再 把这些字符串转换 成编译器能够理解的字节码，而后执行这些字节码。

Google 的 V8 引擎 是用 C++ 编写的，它也可以编译并执行 JavaScript 源代码、处理内存分配和垃圾回收。它被设计成由两个编译器组成，能够把源码直接编译成机器码：

1) Full-codegen：输出未优化代码的快速编译器

2) Crankshaft: 输出执行效率高、优化过的代码的慢速编译器

若是 Crankshaft 肯定须要优化的代码是由 Full-codegen 生成的未优化代码，它就会取代 Full-codegen，这个过程叫作“crankshafting”。

一旦编译过程当中产生了机器代码，引擎就会向浏览器暴露全部的数据类型、操做符、对象、在 ECMA 标准中指定的函数、或任何运行时须要使用的东西，NativeScript 就是如此。

---

 

3.Chrome浏览器的开发者工具面板介绍

3.1 Chrome浏览器开发者工具的打开方式：

1）功能键F12或者Ctrl+Shift+j或者Ctrl+Shift+j打开；

2）打开浏览器右上角用户设置下拉菜单，选择更多工具，再选择开发者工具便可打开开发者工具。

3.2 开发者工具的工具栏中经常使用面板介绍

Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面获得反馈。

Console:记录开发者开发过程当中的日志信息，且能够做为与JS进行交互的命令行Shell。

Sources: Sources功能面板是资源面板,他主要分为四个部分,四个部分并非独立的,他们互相关联,互动共同实现一个重要的功能:监控js在执行期的活动。简单来讲就是断点啦。

Network:从发起网页页面请求Request后分析HTTP请求后获得的各个请求资源信息（包括状态、资源类型、大小、所用时间等），能够根据这个进行网络性能优化。

Timeline:记录并分析在网站的生命周期内所发生的各种事件，以此能够提升网页的运行时间的性能。

Profiles:若是你须要Timeline所能提供的更多信息时，能够尝试一下Profiles,好比记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。

Application:记录网站加载的全部资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

Security:判断当前网页是否安全。

Audits:对当前网页进行网络利用状况、网页性能方面的诊断，并给出一些优化建议。好比列出全部没有用到的CSS文件等。

3.2.1 元素（Element）面板

Element面板打开方式:

1) 打开开发者工具后选择开发者工具面板中的Element页签;

2) 打开浏览器以后,鼠标右键检查 (火狐浏览器是” 审查元素”)

Element面板的经常使用功能:

1) 实时编辑DOM节点

在Element面板的DOM树视图中.呈现出了当前页面中的全部的DOM节点.鼠标双击任何DOM节点均可以修改其中的属性值,修改完成以后按回车键浏览器会当即显示出修改后的效果.

注意:这种及时的修改只是临时的修改,只能作调试用,实际应用中每每是调试结束后再将正确的属性值在本地代码中修改.

2) 实时编辑CSS样式

在Element面板中也能够对当前页面的DOM元素的样式进行实时的修改,修改后元素的样式当即生效.

实时修改某一DOM元素的样式的操做步骤:

首先选中这个DOM元素.若是没有打开开发者工具,能够在要修改的DOM元素上右键-->审查元素,而后选择控制面板右侧的Style便可看到当前DOM元素的全部CSS样式,双击其中的CSS属性值就能够修改,修改后立刻生效.若是已经打开了开发者工具,能够经过先点击开发者工具面板最左侧的放大镜,而后再去点击页面上要修改的DOM元素选中这个要调试的DOM元素.此时控制面板右侧的Style中就呈现出了当前选中的DOM元素的CSS属性双击属性值便可修改.

注意:这种及时的修改只是临时的修改,只能作调试用,实际应用中每每是调试结束后再将正确的属性值在本地代码中修改.

3)打开盒子模型,调试边框参数

点击右侧的Computed页签能够看到当前选中的元素的盒子模型参数,全部的值都是能够修改的.点击不一样的位置(top,bottom,left,right)就能够修改元素的padding,border,margin属性值.也能够经过修改盒子模型中间的数据改变元素的width和height.修改的时候浏览器中的当前元素会响应地变化,同时在左侧Element面板中会自动添加上响应的Stylt属性值.当页面上显示的样式符合要求以后,便可中止修改,而后将Element中生成的属性值复制到代码中,样式便可永久修改.

3.2.2 控制台(Console) 面板

1)查看脚本运行过程当中的异常信息;
因为JavaScript属于弱语言类型,语法要求不严谨.而且JavaScript是解释型语言,在代码中输入中文的标点等错误也不会有提示,只有运行结束后才会抛出异常信息到控制台.

若是想查看具体的异常信息，直接点击右边的异常信息控制台将会把咱们带到程序中错误出现的具体位置：

2)打印日志信息;

上边说到了简单的调试可使用alert方法将想要看到的信息显示在弹窗中。可是alert存在弊端：阻断程序运行，不能显示对象的细节信息，弹出多个信息时必须点击肯定才能看到下一个弹窗的信息。这些问题使用console提供的打印日志的方法能够完美解决。

Console经常使用的打印日志的方法有：

A) console.log(“info”)显示通常的基本日志信息，当要显示的基本日志信息太多时，可使用console.grop()方法将日志分组;

B) Console.warn(“info”)显示带有黄色小图标的警告信息;

C) Console.error(“info”)显示带有红色小图标的错误信息；

  Console打印日志的使用场景：

A)在代码中使用console.log()打印日志信息：

B)直接在控制台上使用console.log()打印信息：

C)清除控制台中信息的方法：

直接在控制台上输出console.clear()方法人后回车便可清除控制台上的信息。还有一种方法是直接点击控制台左上方的清除日志的按钮清除日志信息。

3)运行JavaScript脚本

控制台还有一个神奇的功能就是能够运行你输入的JavaScript脚本，这一点很是实用。

实用场景一：快速验证JavaScript中的方法。

将一个小数按照输出，要求：只保留两位小数。经过查JavaScript的API得知Number对象有一个toFixed方法能够指定小数位的长度，可是又没有例子，最快的尝试方法就是在控制台上验证：

console.log(new Number("3.1415926").toFixed(2));

实用场景二：控制台中输入JavaScript方法时有提示。

  经过document获取指定id的节点的方法是document.getElementById(“id”)可是由于MyEclipse，Eclipse中在写JavaScript时可能没提示，本身写太痛苦并且还容易写错。这时，就能够在控制台上经过方法提示来补全这个方法。

如上图：咱们不须要完整输入方法名，根据提示使用键盘的上，下键选择须要的方法而后回车便可。

D）Console面板中的全局搜索（快捷键Ctrl+Shift+F）

打开全局搜索，输入关键字，可以搜索到包含这个关键字的全部的文件。

应用场景：刚到一个公司，对公司的业务不熟。登陆页面有几千行代码，我只想找到登陆的那个方法。这时，输入登陆方法名就能搜索到登陆登陆方法所在的页面。点击进去就可以定位到这个方法了。

3.2.3 资源(Source) 面板

Source资源面板中显示加载当前页面须要的全部资源。

在Source面板中能够找到当前浏览器加载的页面，而后对其中的JavaScript脚本进行断点调试。Chrome开发者工具使用中会具体说明。

3.2.4 网络(NetWork) 面板

NetWork面板能够记录页面上的网络请求的详细信息，从发起网页请求Request后分析HTTP请求后获得的各个请求资源信息（包括状态，资源信息，大小，所用时间，Request和Response等），能够根据这个进行网络性能优化。

1. Controls 控制Network的外观和功能。
2. Filters 控制Requests Table具体显示哪些内容。
3. Overview 显示获取到资源的时间轴信息。
4. Requests Table 按资源获取的先后顺序显示全部获取到的资源信息，点击资源名能够查看该资源的详细信息。
5. Summary 显示总的请求数、数据传输量、加载时间信息。

NetWork面板的Requests Table 包含着HTTP请求和响应的具体信息，是比较经常使用的一块

• Name 资源名称，点击名称能够查看资源的详情状况，包括Headers、Preview、Response、Cookies、Timing。
• Status HTTP状态码。
• Type 请求的资源MIME类型。
• Initiator 标记请求是由哪一个对象或进程发起的（请求源）。
• Parser： 请求由Chrome的HTML解析器时发起的。
• Redirect：请求是由HTTP页面重定向发起的。
• Script：请求是由Script脚本发起的。
• Other：请求是由其余进程发起的，好比用户点击一个连接跳转到另外一个页面或者在地址栏输入URL地址。
• Size 从服务器下载的文件和请求的资源大小。若是是从缓存中取得的资源则该列会显示(from cache)
• Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
• Timeline 显示全部网络请求的可视化瀑布流(时间状态轴)，点击时间轴，能够查看该请求的详细信息，点击列头则能够根据指定的字段能够排序。

查看具体资源的详情

经过点击某个资源的Name能够查看该资源的详细信息，根据选择的资源类型显示的信息也不太同样，可能包括以下Tab信息：

• Headers 该资源的HTTP头信息。
• Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
• Response 显示HTTP的Response信息。
• Cookies 显示资源HTTP的Request和Response过程当中的Cookies信息。
• Timing 显示资源在整个请求生命周期过程当中各部分花费的时间。

针对上面4个Tab进行详细讲解一下各个功能：

① 查看资源HTTP头信息

在Headers标签里面能够看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。

预览响应数据

③ 查看资源HTTP的Response信息

在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。

④ 查看资源Cookies信息

若是选择的资源在Request和Response过程当中存在Cookies信息，则Cookies标签会自动显示出来，在里面能够查看全部的Cookies信息。

---

 

4.Chrome开发者工具之断点调试

4.1 JavaScript脚本断点调试

第一步：打开开发者工具，按F12或者在浏览器页面上右键选择检查。

第二步：在Source面板中找到须要调试的文件。 

第三步：设置断点。

第四步：触发调试部分程序的运行，开始调试。

调试过程当中经常使用的按钮及快捷键：

跳到下一个断点：点击Sources面板右侧的“三角按钮” 

快捷键：F8

        Ctrl+\

跳到下一步（逐步跨方法）：点击Sources面板右侧的第二个按钮

快捷键：F10

 　　　 Ctrl+’

跳进断点处的方法中：点击Sources面板右侧第三个按钮

快捷键：F11

        Ctrl+;

跳出正在执行的方法：点击Sources面板右侧第四个按钮

快捷键：Shift+F11

  　　  Ctrl+Shift+;

禁用断点：点击Sources面板右侧的第五个按钮

暂停在捕获到的异常处：点击Sources面板右侧的第六个按钮，而后勾选Pause On Caught Exception

暂停在未捕获的异常处：点击Sources右侧的第六个按钮，不勾选Pause On Caught Exception.

查看断点处，获取的数据的值：

将鼠标光标停留在变量上面便可，也能够将变量赋值到Console的控制台上打印出来。

清除断点：

在Source面板最右侧面板中，找到Breakpoints打开，能够看到你打的断点。在断点列表出右键选择Remove all breakpoints能够一次性删除全部断点。

4.2 XHR断点调试

右侧调试区有一个 XHR Breakpoints，点击+ 并输入 URL 包含的字符串便可监听该 URL 的 Ajax 请求，输入内容就至关于 URL 的过滤器。若是什么都不填，那么就监听全部 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。

4.3 事件监听断点

事件监听是对咱们选定的是事件类型进行监听，当这个事件触发的时候，程序就会在这个事件处中止。有助于咱们快速找到某一个元素上绑定的事件。

应用场景：咱们刚接手一个项目时，对业务不熟。想找到提交登陆事件对应的方法，可是发现页面上登陆按钮绑定事件写的不是很明确，并且处理登陆业务的JavaScript脚本文件有几百行，想找到这个按钮很不容易。此时，咱们就能够选定鼠标的点击事件进行监听，当咱们点击登陆按钮的时候控制台Sources面板会自动将咱们带到登陆方法处。

事件监听断点使用步骤（以查找天猫首页登陆方法为例）：

1.首先打开京东登陆页面找到登陆按钮；

2.在登陆按钮上右键属性==》检查 打开开发者工具，而后打开Sources面板

3.打开Sources面板右侧的Event Listener Breakpoints 找到Mouse及鼠标事件下边的click而后勾选上。

4. 点击登陆按钮，触发鼠标的点击事件，发现程序中断在JavaScript文件中，点击面板下方的 “{}” 将代码格式化一下，此时就找到了登陆按钮触发的点击事件了。

此时就能够一步一步的像下跟，知道跟到天猫的登陆方法了。

---

 

5 其余设置

5.1 设置开发者工具的位置：

Chrome刚安装好时，打开开发者工具，开发者工具默认在浏览器的左半边。

能够经过开发者工具面板右上角的设置开发者工具在浏览器中出现的位置。

视图1：开发者工具以一个独立的窗口存在；视图2：在浏览器下方显示；视图3：在浏览器右半边显示。

5.2 清除浏览器缓存的方法：

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就能够从本地磁盘显示文档，这样就能够加速页面的阅览。可是，对开发人员来讲，咱们修改了JavaScript脚本以后须要当即看到修改的效果，因此须要清除缓存，清除缓存经常使用的方法有：

1.Ctrl + F5

F5一般只是刷新本地缓存；Ctrl+F5能够把INTERNET临时文件夹的文件删除再从新从服务器下载，也就是完全刷新页面了。

2.开发者工具打开以后，快速清除缓存的方法：

开发者工具打开以后，浏览器刷新图标上右键会出现清空缓存并硬性从新加载。这一方法可以在开发者工具打开时快速清理缓存。

3.Ctrl + Shift + Del 快捷键清除缓存。

选中地址栏中的URL

按快捷键：Ctrl + Shit + Del  会弹出一个清除浏览数据的弹窗，选择要清理的数据项以后，点击清除浏览数据便可。

5.3 禁用页面的JavaScript脚本；

应用场景：在开发互联网电商项目时，须要一些商品图片，因而就去京东找到一个商品打开商品图片以后，想复制或者将这个图片另存为，此时，发现右键后什么都没有。

缘由是，京东在图片上经过JavaScript脚本禁用了鼠标右键点击事件。此时，咱们能够经过禁用当前页面的JavaScript事件，经过鼠标右键保存图片。

禁用网页JavaScript事件的方法：

1）开发者工具==》Settings

2）勾选Debugger下的Disable JavaScript 复选框。