Chrome控制台简介

首先介绍Chrome开发者工具中，调试时使用最多的三个功能页面是：

元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。
源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。

1、元素（Elements）

查看元素代码：点击如图 箭头（或用者用快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置 。

查看元素属性：可从被定位的源码中查看部分，如class、src，也可在右边的侧栏中查看全部的属性，如下图位置查看

修改元素的代码与属性：可直接双击想要修改的部分，然后就进行修改，或者选中要修改部分后点击右键进行修改，如下图

注意：这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。

右边的侧栏个功能的介绍:如下图所示

2、控制台（Console）

该面板用来显示网页加载过程中的日志信息，包括打印，警告，错误及其他可显示的信息等。同时它也是一个js交互控制台。

上图显示了百度首页的console面板信息，该信息来源于执行请求下来的js文件所得。每条信息的右侧显示了信息的来源的js文件及具体的行数。同时最下边个人写了一条简单的输出信息，输出“这是数据小丸子”。
更为重要的一个功能是：ctrl+shift+F在该面板中能够唤起全局搜索功能，即可以在所有下载的资源中搜索目标信息，这点对于关键字查找是非常重要的。

3、源代码（Sources）

4、网络（Network）

控制外观和显示功能

过滤器

能够自定义筛选条件，找到自己想要资源信息，如下图所示。

是否保留日志

当选择保留日志，重新加载url当前界面时，之前请求显示的资源信息，会保留下来，不会清空的哟~

XHR表示ajax请求，即异步请求，在爬虫中最重要的是分析该项。Doc表示的是html文档类型。

请求列表

列表说明

• 下列介绍中，前者为名词解释，后者为举例
• Name/Pat：资源名称以及URL路径 （main.css）
  
• Method：Http请求方法 (GET或者POST)
  
• status/Text：Http状态码/文字解释 （200，ok）
  
• Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
  

• Initiator：解释请求是怎么发起的，有四种可能的值

  1.Parser  ：请求是由页面的html解析时发送
  2.Redirect：请求是由页面重定向发送
  3.script  ：请求是由script脚本处理发送
  4.other   ：请求是由其他过程发送的，比如页面里的Link链接点击

• size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小
  

  请求文件说明

  

  一共分为四个模块：

  Header：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
  Timing：资源请求的详细信息花费时间

  Preview和Response

  Preview和Response里的内容基本上一样的，Response里面的是接口返回的真正数据，但是不方便阅读。当接口返回的内容是js或css时，Preview和Response中内容是一样的。但返回的数据是json格式时，Preview是将Response里的数据转成javascript的json对象，便于用户阅读。当Response的结果中有数字格式的12345.0时，在Preview中展示的是12345。效果如下图：
  

所以，可以选择返回小数的值的时候将其数值类型转换为字符串类型，返回。