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. #import、#include、#import<>和#import””的区别

    一.#import与#include #import不会引起交叉编译的问题.因为在Objective-C中会存在C/C++和Object-C混编的问题,如果用#include引入头文件,会导致交叉编译 ...

  2. python基础语法(二)

    本文主要包括以下内容 函数 切片 迭代 列表生成式 生成器 迭代器 函数 定义函数 定义函数 在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块 ...

  3. ReactNative环境配置

    参考链接 Windows系统安装React Native环境 windows下React Native Android 环境搭建 在Windows下搭建React Native Android开发环境 ...

  4. Eclipse的各种快捷键

     参考他人总结好的 Eclipse快捷键大全(转载) Ctrl+1 快速修复(最经典的快捷键,就不用多说了)     ---->例如:add unimplement methodCtrl+D:  ...

  5. poj 3661 Running

    题意:给你一个n,m,n表示有n分钟,每i分钟对应的是第i分钟能跑的距离,m代表最大疲劳度,每跑一分钟疲劳度+1,当疲劳度==m,必须休息,在任意时刻都可以选择休息,如果选择休息,那么必须休息到疲劳度 ...

  6. 三、jQuery--jQuery基础--jQuery基础课程--第11章 jQuery 工具类函数

    1.获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browse ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  8. Lattice Diamond 学习之编译、检查和设置约束

    在新建工程以及完成代码的输入之后.则就要进行编译,并检测错误. 一. Generate Hierarchy(产生层次结构). 1. 点击Generate Hierarchy 图标或者Design -- ...

  9. CocoaPods 安装

    虽然网上关于CocoaPods安装教程多不胜数,但是我在安装的过程中还是出现了很多错误,所以大家可以照下来步骤装一下,我相信会很好用. 前言 在iOS项目中使用第三方类库可以说是非常常见的事,但是要正 ...

  10. 信号通讯编程,王明学learn

    信号通讯编程 在Linux系统中,信号(signal)同样也是最为古老的进程间通信机制. 一.信号类型 Linux系统支持的所有信号均定义在/usr/include/asm/signal.h(展示), ...