Chrome调试工具常用功能

一.打开的快捷键

  

windows: ctrl + shift + i/F12

  1.Elements

    1.选中 元素 切换至 Event… Tab可以查看这个元素绑定的事件

    2.在 Element 选项卡中可以修改html

  2.断点

  • 在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断点, 在循环中需要断点时比较有用
  • 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信息时比较有用
  • 断点后的变量保存到全局
    • 选中变量, 右键 Evalute in console
    • 在 console 中选中输出的内容, 右键 store as global variable
  • dom mutation 断点(推荐)
    • dom mutation event 是 DOM3 添加的新的事件, 一般是 dom 结构改变时触发. devtools 可以对 DOMSubtreeModified DOMAttrModified 和 DOMNodeRemoved 时断点. 对上面 元素上事件断点(mouseover) 后不容易找到业务代码, 使用 mutation 断点, 断点后配合 call stack 就可以找到业务代码了
  • 全局事件断点
    • devtools 还可以对事件发生时断点, 比如 click 发生时断点, 这个跟 元素上事件断点 不同, 不会限定在元素上, 只要是事件发生, 并且有 handler 就断点; 还可以对 resize, ajax, setTimeout/setInterval 断点.
  • xhr 断点
  • 条件断点
  • 几个常用的断点快捷键:
    • F8: 继续执行
    • F10: step over, 单步执行, 不进入函数
    • F11: step into, 单步执行, 进入函数
    • shift + F11: step out, 跳出函数
    • ctrl + o: 打开文件
    • ctrl + shit + o: 跳到函数定义位置
    • ctrl + shift + f: 所有脚本中搜索

  3.Console

    元素选择
  • $(selector)
    • 即使当前页面没有加载jQuery,你也依然可以使用$$$函数来选取元素,实际上,这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装,$用于选取单个元素,$$则用于选取多个
  • $_
    • 使用 $_来引用最近的一个表达式

  使用Reres替换线上文件

  • 待补充

  使用Charles 替换线上JS文件

  • 先把电脑上的代理软件关掉,再打开 Charles,在菜单栏选择 Proxy 打开 macos Proxy。
  • 打开 Chrome 上的开发者工具,选择 Network 把禁止缓存勾上(Disable cache)。
  • 刷新页面,在 Charles 上选中需要替换的 JS 代码,右键选择 Map Local…,然后在点击 Choose 按键,选择需要替换的 JS 代码。

  使用Fiddler修改线上JS文件

  • 打开 Fiddler ,设置只抓取浏览器流量
  • 使用 SwitchyOmega 设置 浏览器代理模式 为 Fiddler代理
  • 使用 Fiddler 截断请求,找到需要修改的 JS 文件修改后 点击 RUN
  • 实例网站 :  某文书网首页 JS

   

原文地址:https://www.cnblogs.com/tjp40922/p/11401840.html

时间: 2024-10-08 15:04:54

Chrome调试工具常用功能的相关文章

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 属性 拖拽节点, 调整顺序 拖拽节点到编辑器 c

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

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

[转]WebPack 常用功能介绍

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

QTP常用功能

1.QTP录制过程的截图 查看录制脚本过程中QTP的截图可以在QTP中查找,在关键字视图中点击每一步都对应一个截图   2.在关键字视图中为测试步骤添加注释 在关键字视图中表格列头中单击鼠标右键,选择"Comment",则在这一列可以为每一步添加注释.   3.识别对象 编辑测试脚本的第一步就是识别对象.QTP针对不同语言开发的控件,采用不同的对象识别技术,根据加载的插件来选择相应的控件对象识别的依据.选择菜单"Tolls | Object Identification&qu

CSS3常用功能的写法

随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法. 以下就是这些写法的详细介绍.所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正. 一.圆角(Rounded Corner) .box_round { -moz-border-radius: 30px; /* FF1+ */ -webkit-border-radius: 3

chrome调试工具高级不完整使用指南(优化篇)

上一篇文章我们说了chrome调试工具的一些比较基础功能的用法,接下来我们要在这一篇文章中说一说,其他一些chrome调试工具的使用方法 2.2 优化模块介绍 2.2.1 Network模块 在netWork模块中,大致上可以分成四块模块, 1- 这个模块相当于是一个功能菜单,左边的四个按钮依次表示的是: 1-1 停止捕获请求 1-2 清除所有的请求 1-3 对请求进行快照 1-4 是否开启过滤选项,也就是是否开启图中的2 除此之外里面的Disable Cache是用来请求请求缓存,Preser

Python常用功能函数

Python常用功能函数汇总 1.按行写字符串到文件中 import sys, os, time, json def saveContext(filename,*name): format = '^' context = name[0] for i in name[1:]: context = context + format + str(i) context = str(context).replace('(','(').replace(')',')').replace(',',',').re

CSS3常用功能的写法 转

CSS3常用功能的写法 作者: 阮一峰 随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法. 以下就是这些写法的详细介绍.所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正. 一.圆角(Rounded Corner) .box_round { -moz-border-radius: 30px; /* FF1+ */ -web

Chrome浏览器常用键盘快捷键介绍

很多人喜欢使用键盘快捷键来操作电脑,因为在熟练的情况下,使用键盘会比使用鼠标点击更快.更高效.本文对Chrome浏览器常用的快捷键做个说明. 标签页和窗口快捷键 1.  Ctrl + n 打开新窗口 2.  Ctrl + t 打开新的标签页,并跳转到该标签页 3.  Ctrl + Shift + t 重新打开最后关闭的标签页,并跳转到该标签页 4.  Ctrl + Tab 跳转到下一个打开的标签页 5.  Ctrl + Shift + Tab 跳转到上一个打开的标签页 6.  Alt + ←