chrome调试工具常用功能整理（转）

Elements

chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css.

  • windows: ctrl + shift + i
  • mac: cmd + opt + i

DOM

修改 html & 属性

节点右键, 如下图, 可以:

  • 添加属性(enter)
  • 修改 html(F2)
  • 删除元素(delete)

除了右键, 还可以:

  • h toggle 元素的 visibility 属性
  • 拖拽节点, 调整顺序
  • 拖拽节点到编辑器
  • ctrl + z 撤销修改

查看元素上绑定了哪些事件

  • 默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点
  • Selected Node Only 只会列出当前节点上绑定的事件
  • 每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture
    • handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler
    • isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的
    • useCapture 是 addEventListener 的第三个参数, 说明事件是以 冒泡 还是 捕获 顺序执行

Styles

修改样式

  • 添加规则
  • 添加、修改属性 同样可以通过 ctrl + z 取消

断点

代码断点

  • 设置断点

    • 在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断电, 在循环中需要断点时比较有用.
    • 断点后可以查看 堆栈, 变量 信息:
  • 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信息时比较有用.
  • 断点后的变量保存到全局
    • 选中变量, 右键 Evalute in console
    • 在 console 中选中输出的内容, 右键 store as global variable

事件断点

元素上事件断点

devtools 可以查看某一个元素上绑定了哪些事件: Elements > Event Listeners

dom mutation 断点(推荐)

dom mutation event 是 DOM3 添加的新的事件, 一般是 dom 结构改变时触发. devtools 可以对 DOMSubtreeModified DOMAttrModified 和 DOMNodeRemoved 时断点. 对上面 元素上事件断点(mouseover) 后不容易找到业务代码, 使用 mutation 断点, 断点后配合 call stack 就可以找到业务代码了, 如下图这种情况使用全局搜索(ctrl + shift + f) 代码中 css classname 也能找到业务代码, 然后直接断点也可以.

全局事件断点

devtools 还可以对事件发生时断点, 比如 click 发生时断点, 这个跟 元素上事件断点 不同, 不会限定在元素上, 只要是事件发生, 并且有 handler 就断点; 还可以对 resize, ajax, setTimeout/setInterval 断点.

下面这个图是 resize 时中断, 因为库都代理了, 还需要在断点处一步一步跟下去才能走到业务代码中.

几个常用的断点快捷键:

  • F8: 继续执行
  • F10: step over, 单步执行, 不进入函数
  • F11: step into, 单步执行, 进入函数
  • shift + F11: step out, 跳出函数
  • ctrl + o: 打开文件
  • ctrl + shit + o: 跳到函数定义位置
  • ctrl + shift + f: 所有脚本中搜索

Console

元素选择

$(selector)

即使当前页面没有加载jQuery，你也依然可以使用$和$$函数来选取元素，实际上，这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装，$用于选取单个元素，$$则用于选取多个：

$_

使用 $_ 来引用最近的一个表达式

$0 - $4

除了$_，你还可以使用$0,$1,$2,$3,$4这5个变量来引用最近选取过的5个DOM元素。 $0 为Elements HTML 面板中选中的元素。 $1 为上一次在 HTML 面板中选中的元素。 $2、$3、$4 同样的。不过只能到$4

copy

复制到剪切板，copy之后，直接ctrl+v

信息输出

在js代码中打点console.log() 类似debugger

时间： 2024-10-08 15:05:04

chrome调试工具常用功能整理（转）的相关文章

Chrome调试工具常用功能

一.打开的快捷键 windows: ctrl + shift + i/F12 1.Elements 1.选中 元素 切换至 Event… Tab可以查看这个元素绑定的事件 2.在 Element 选项卡中可以修改html 2.断点 在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断点, 在循环中需要断点时比较有用 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右

VIM编辑器常用功能整理笔记

vim编辑器 vi : visual Inertface 可视化接口 vim : vi improved 扩展版 语法着色 模式化编辑器: 编辑模式(命令模式): 默认模式 输入模式: 末行模式: 等待输入命令 10d 删除第十行 10,20d set nu 显示行号 ! ls /etc 不用退出文件输入 系统shell命令 模式转换 编辑--> 输入 小写 i:在当前光标位置前面输入 a:在当前光标位置后面输入 o:在当前光标下一行新建一行 输入内容 大写 I 行首 A 行尾 O 上一行新建一

IOS开发－OC学习－常用功能代码片段整理

IOS开发-OC学习-常用功能代码片段整理 IOS开发中会频繁用到一些代码段,用来实现一些固定的功能.比如在文本框中输入完后要让键盘收回,这个需要用一个简单的让文本框失去第一响应者的身份来完成.或者是在做与URL有关的功能时,需要在Info.plist中添加一段代码进而实现让网址完成从Http到Https的转换,以及其他的一些功能. 在从一个新手到逐渐学会各种功能.代码.控件.方法如何使用的过程中,也在逐渐积累一些知识,但是一次总不会把这些东西都深刻记住并完全理解.所以在这儿记录下这些东西,用来

chrome调试工具高级不完整使用指南（基础篇）

一.前言 本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作 二.浏览器模块介绍 由于chrome浏览器一直在不断的进行更新迭代,会不断的新增功能,有一些老的功能会被摒弃掉,所以我们介绍这个功能的时候是以这个系列文章发布时候的最新版为主(2018-01-05 ) 1. 用来选择所需要的HTML元素,通过HTML元素定位到Elements中的对应代码 2. 用来在手

项目中常用功能，如：流媒体、健康数据（步数等）等－b

整理iOS开发中使用的各种流媒体和常用的高级功能.由于时间关系,目前只写了一部分功能,全部都采用的是系统方法,没用第三方,截图如下: screen1.png screen2.png 个人比较懒,不爱多写文字,直接上代码,哈哈. 视频 系统用AVFoundation与MediaPlayer框架实现播放视频的方案.其中AVFoundation扩展性好,都需自定义功能,而MediaPlayer集成简单,但是样式不可扩展. 1.AVFoundation使用AVPlayer播放视频,它属于view的lay

2015-8-25-关于后端的知识以及常用函数整理

首先结构一般是分为B/S(Browser/Server)和C/S(Client/Server)的,我们所用的是基于B/S结构的. 其中这里的B主要是一些控件的组成的页面,主要是由JScript控制的, 其中的S主要是由SSL代码控制的,又分为Server Script和Data Sources,首先来说说两者的一些区别(Server Script用SS代替,Data Sources用DS代替): 对于我们这个LIMS系统来说,最常用的操作就是对数据库的增.删.改.查,其中的“查”,也就是从数据库

linux常用命令整理（四）：软件包管理和shell基础

大家好,我是会唱歌的程序猿------ 最近在学习linux,闲暇之余就把这些基本的命令进行了整理,希望大家能用的上,整理的的目的是在忘了的时候翻出来看看^?_?^,前后一共分为五个部分: linux基本命令整理(一):常用命令 地址:http://www.cnblogs.com/devinCat/p/7247824.html linux基本命令整理(二):用户.用户组.文件系统和网络 地址:http://www.cnblogs.com/devinCat/p/7247847.html linux

NIOS II常用函数整理-感谢slam原创

IO操作函数函数原型:IORD(BASE, REGNUM) 输入参数:BASE为寄存器的基地址,REGNUM为寄存器的偏移量函数说明:从基地址为BASE的设备中读取寄存器中偏移量为REGNUM的单元里面的值.寄存器的值在地址总线的范围之内.返回值: - 函数原型:IOWR(BASE, REGNUM, DATA)输入参数:BASE为寄存器的基地址,REGNUM为寄存器的偏移量,DATA为要写入的数据函数说明:往偏移量为REGNUM寄存器中写入数据.寄存器的值在地址总线的范围之内.返回值: - 函数

[转]WebPack 常用功能介绍

概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.template等.个人认为它的优点就是易用,而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求.这里就尽量详细的来介绍下一些基本功能的使用. 安装 npm install webpack 运行webpack webpack需要编写一个config文件,然后根据这个文件来执行需