开发者工具顶部有Elements、Console、Network等八个栏目。常用的有三个：Elements，用来查看需爬取字段的HTML标签信息；Console，可以检测你的JS代码；Network，用来分析HTTP请求。

Sources调试使用

在左侧的脚本代码编号，鼠标点击即可添加断点，添加断点后，刷新网页，程序运行到断点即可看到断点调式的状态了，具体调试需要在自己想查看某个方法里边是否有问题，一步步排除，效果很好

Resources

可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及Cookies

 
 
 
 
 
 

NetWork

可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；这里有位是百度首页演示，百度首页内容很干净所以不需要加载什么图片等资源

tips:

谷歌浏览器建议使用Ctrl+R刷新页面，可以将修改的js和html代码无误快速更新

2.4 chrome 开发者工具的更多相关文章

  1. Chrome开发者工具不完全指南：（三、性能篇）

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  2. Chrome开发者工具不完全指南（四、性能进阶篇）

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  3. Chrome开发者工具不完全指南（五、移动篇）

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

  4. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  5. Chrome开发者工具不完全指南（六、插件篇）

    本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...

  6. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  7. Chrome开发者工具详解(3)-Timeline面板

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

  8. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  9. Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...

  10. Google Chrome开发者工具

    Google Chrome开发者工具 是内嵌到浏览器的开发工具,打开方式有两种:第一“按F12”,第二:shift+ctrl+i(火狐.360等浏览器也可以这么用) Console介绍 Console ...

随机推荐

  1. Recursive - leetcode [递归]

    经验tips: Recursion is the best friend of tree-related problems. 一是只要遇到字符串的子序列或配准问题首先考虑动态规划DP,二是只要遇到需要 ...

  2. css margin相关问题及应用

    一.margin常见问题 1.IE6下双边距问题 margin双布局可以说是IE6下经典的bug之一.产生的条件是:block元素+浮动+margin. 2.maring重叠的问题 css2.0规范对 ...

  3. NFV FD.io VPP VM 系统性能调优

    Host Setting: 1.关闭power savings mode在BIOS中 2.设置 /sys/devices/system/cpu/cpu*/cpufreq/scaling_governo ...

  4. jquery如何获取url中问号后面的数值

    假如路径是这样的:www.domain.com/list/?menu=1 var locationUrl = location.search.substring(6); switch(location ...

  5. python 基础学习-总结1

    1.Python 简介 易学易懂,语法简单 不需编译,即可运行 比其他语言更简洁 不需要管理内存 1.1 什么是Python? python 是由Guido.van.Rossum于1989年始创,其根 ...

  6. C++中int转为char 以及int 转为string和string 转int和空格分隔字符串

    1.对于int 转为char 直接上代码: 正确做法: void toChar(int b) { char u; ]; _itoa( b, buffer, ); //正确解法一 u = buffer[ ...

  7. Python 第一课笔记

    1.Hello World程序的两种方法     在windows下执行 1.编辑器里输入,不用编译 print("Hello World!") 直接就可以运行      2.可以 ...

  8. 重读The C programming Lanuage 笔记二：运算符优先级

    运算符的优先级和结合性有明确的规定,但是,除少数例外情况外,表达式的求值次序没有定义,甚至某些有副作用的子表达式也没有定义. 也就是说运算符的定义保证了其操作数按某一特定的顺序求值,否则具体实现可以自 ...

  9. 【CSS】display: inline-block，内联元素

    什么是内联元素? <CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示.比如,我们设定 ...

  10. 读取Zip文件内容

    第一步,上次文件并保存到服务器目录下 /// <summary> /// 上传压缩文件 /// </summary> protected void UploadZip() { ...