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. ArrayList 和 LinkedList 的区别

    1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构.2.对于随机访问get和set,ArrayList优于LinkedList,因为LinkedList要移动 ...

  2. 55. Jump Game leetcode

    55. Jump Game Total Accepted: 95819 Total Submissions: 330538 Difficulty: Medium Given an array of n ...

  3. java ---线程wait/notify/sleep/yield/join

    一.线程的状态 Java中线程中状态可分为五种:New(新建状态),Runnable(就绪状态),Running(运行状态),Blocked(阻塞状态),Dead(死亡状态). New:新建状态,当线 ...

  4. 四、优化及调试--网站优化--Yahoo军规中

    8.避免使用CSS表达式(避免在CSS中使用Expressions) 什么是CSS表达式:是用来把CSS属性和JavaScript关联起来.

  5. php 简易购物习题

    1.货物界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. JavaWeb学习之什么JSP、JSP是如何工作的、JSP语言（各种指令和九大内置对象）、EL表达式简单使用（5）

    1.什么JSP * servlet:java编写的处理动态web的技术 * 特点:Java代码中嵌套html代码 * jsp * 特点:HTMl代码中嵌套java代码 * %tomcat%/conf/ ...

  7. LINQ To DataSet 示例

    如果在项目遇到这样的问题如:DataTable1和DataTable2需要根据一定的规则进行合并成一个DataTable3. 问题1:DataTable1不是读数据库表的结果,而是合成的数据集,因此无 ...

  8. android 入门-布局

    android:gravity 针对本view 的位置. android:layout_gravity 本view相对于父布局view的位置. android:layout_alignParentRi ...

  9. 解决因为I_JOB_NEXT问题导致job执行不正常，不停生成trace文件问题

    今天同事说有个项目生产环境的目录老是满.查看了一下bdump目录,发现确实是平均1分钟生成一个8M左右的trace文件.查询了一下alert日志,发现是个job的报错引起的.具体查看了一下trace文 ...

  10. 智能车学习（二十二）——浅谈速度控制

    一.经典PID控制       使用遇限反向PID会比较适合有加减速的车子,使用变速积分适合跑匀速的车子.然后这种方法的条件下,一定要尽可能缩短控制周期..   二.PID加棒棒控制       针对 ...