Google Chrome开发者工具

　　是内嵌到浏览器的开发工具,打开方式有两种：第一“按F12”，第二：shift+ctrl+i（火狐、360等浏览器也可以这么用）

Console介绍

Console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug("输出内容")；来在Console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿Console。console.debug("Console使用介绍");console是小写形式，不然提示没有Console

具体还其他应用，请参考：九个Console命令，让js调试更简单

Resources介绍

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

Sources介绍

Sources可以查看运行的脚本，调试一般都是在Sources调试的，所以程序开发者需要了解和熟悉Sources的使用

Sources调试使用

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

NetWork介绍

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

Elements介绍

Elements这个就比如页面的每个元素吧，比如百度搜索这个图片，可以通过Elements找到，搜索框也可以，在底下的“放大镜”类似的控件，点击然后选择自己想要查看要素或位置，Elements会跳转到相应的实现代码

Google Chrome开发者工具的更多相关文章

  1. Google Chrome开发者工具-移动仿真：触摸事件仿真

    如果你在开发PAD/手机所用WEB版应用,需要在桌面审查页面元素.调试脚本,模拟移动设备尺寸.事件.位置等信息, 那么可以使用Chrome开发者工具(DevTools)提供的强大的移动仿真功能,支持主 ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. Chrome开发者工具详解(1)

    Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...

  9. Chrome开发者工具详解(2)

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...

随机推荐

  1. hdu 1203

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1203 思路:01背包问题,求一份都拿不到的概率,状态转移方程dp[j]=min(dp[j],dp[j- ...

  2. php JS和JQ

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery – 3.JQuery的Dom操作

    3.1 JQuery的Dom操作     1.使用html()方法读取或者设置元素的innerHTML    2.使用text()方法读取或者设置元素的innerText     3.使用attr() ...

  4. Pyqt 设置 背景颜色和背景图片、 QPalette 调色板 与QPainter 画板区别 、 不规则图片

    设置 背景颜色和背景图片 首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...

  5. Install PIL on mac osX10.9

    follow this instruction: http://blog.csdn.net/liushuaikobe/article/details/8729652 and if you encoun ...

  6. HDU4495 Rectangle

    求组成的等腰三角形面积最大值. 对此题的总结:暴力出奇迹 组成的三角形放置方式一共只有4种,用ans表示目前已知的最长三角形的边长,从上到下,从左到右枚举顶点,再枚举边长,一个重要剪枝是枚举边长l时先 ...

  7. 攻城狮在路上（壹） Hibernate（七）--- 通过Hibernate操纵对象（下）

    一.与触发器协同工作: 当Hibernate与数据库的触发器协同工作时,会出现以下两类问题: 1.触发器使Session缓存中的数据和数据库中的不一致: 出现此问题的原因是触发器运行在数据库内,它执行 ...

  8. lvs+keepalived 负载均衡

    LVS是一个开源的软件,可以实现LINUX平台下的简单负载均衡.LVS是Linux Virtual Server的缩写,意思是Linux虚拟服务器.目前有三种IP负 载均衡技术(VS/NAT.VS/T ...

  9. Jquery获取iframe子/父窗口中的标签

    获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...

  10. ERROR 1290 (HY000): The MySQL server is running with the --skip-grant-tables option so it cannot execute this statemen

    转自:http://www.cnblogs.com/iosdev/archive/2013/07/15/3190431.html mysql 配置文件目录:/etc/my.cnf root 密码为空的 ...