Chrome的调试工具

1.Element面板

      调试HTML和CSS

      1.1.对HTML增删查改

           可以修改节点内容也可以修改节点的属性

           可以删除一个节点

           可以增加一个节点：选中一个节点，右键edit as html

      1.2.对CSS增删查改

          点击某个节点，右侧会出现相应的这个节点的所有样式。我们可以看到每一个样式在哪个文件中，这个样式集成与哪个文件，哪个样式被覆盖了，还有这个元素的盒模型

          修改样式：双击

         在已有的中添加样式

         直接添加一个新的

        删除一个样式：去掉勾选

2.network面板

      查看所有的网络请求，在和后端调试一些接口的时候可能会用到

3.source面板

     包含网站所有的资源，js源码，图片资源

     可以设置断点来调试JS文件

4.命令行工具

     可以在console面板中直接输入JS代码进行执行

     或者在js文件中输入一些值，方便调试

5.Resource(Application)

    包含网站本地的数据资源比如：cookie,storage

6.profile,Timeline,audits用于调试网页的性能

7.针对于IE

  IE 早期不自带更新，所以存在了IE6---IE11这么多的版本

  IE8+自带调试工具，

  IE6：浏览效果：IEtester,调试：IE6原声浏览器+IE Developer Tool