快捷键
1.chrome 快捷键
1.调试模式下
1.来源里面
1.ctrl f / ctrl shift f 查找(点top侧生效)
1.ctrl + f 支持 xpath 查询
2.ctrl+shift+o 定位函数 可跳转
3.Ctrl+/ 注释一行或注释选定文本：
4.ctrl + g 定位
5.ctrl + d 选中一个后 按此快捷键 跳到下一个 选中处
1.多选 可以同时修改
2.ctrl + u 撤销最后一个 选择
2.esc 打开隐藏 抽屉
3.来源代码分析 匹配括号 ctrl m
4.console面板
a.ctrl L 清空内容
b.ctrl ` 聚焦 控制台 无论什么时候 都生效
1.可以变相的认为代替了 esc 调出 副控制台
5.任何地方
1.ctrl + o 或者 ctrl + p 打开文件 可以执行片段
1.打开后 !hello 执行片段
2.:63 跳转到 63行 等价与 ctrl + g
2.非调试模式
alt f4 所有
esc 停止加载
ctrl
n 打开新窗口
(1-8顺序 9最后)
t 打开新标签
tab 切换
w 关闭当前
+- 放大缩小
0 正常大小
h 历史记录
j 下载内容
shift
space 向上滚动 space 向下滚动
ctrl shift
n 以隐私模式打开新
t 打开上次关闭的
tab 切换回上一个
1.刷新
1.刷新页面：F5，Ctrl+R
2.刷新页面并清除缓存：Ctrl+F5，Ctrl+Shift+R
经验实操
0.打开调试的方式
F12；
快捷键 Ctrl+Shift+I；
鼠标右键检查或者审查元素；
浏览器右上角 —> 更多工具 —> 开发者工具
1.基本设置
1.打开小齿轮
1.勾选 在 匿名和内容脚本种 搜索
2.取消 启用 javascript 源代码映射
3.勾选 可以折叠代码
4.如果用到各种反调试
1.停用 javascript
2.停用异步堆栈轨迹
2.html代码标签的用法
1.在代码上右键
1.强制执行状态 可以让元素处于 :active :hover 等状态
2.复制(也 可以 隐藏 删除)
1.css
2.selecter
3.xpath
4.outerHTML
3.发生中断条件
1.子树修改
2.属性修改
3.移除节点
4.以递归方式展开
5.收起子级
6.截取节点屏幕截图 (截图后直接会自动下载)
7.滚动到视野范围内
3.控制台
1.控制台左边栏 可以 分类各种提示信息
2.清除图标 等同与 快捷键 ctrl + L
3.清除图标右边的下拉 箭头 默认是本网页的上下文环境 也可以 选择 各个 插件的 上下文 这样就可以直接调试插件了
4.点击 眼睛 可以添加一个表达式
5.再眼睛 右边 过滤里面 可以用 -Listen -百 减号来排除 非减号 留下
6.在最右边的 设置 按钮 里面
1.保留日志
2.记录 XMLHttpRequest
4.源代码/来源
1.网页
1.里面有各种代码 js html png 等等
2.替换 (Overrides)
1.添加一个文件夹
2.浏览器会弹出 是否 允许(Allow) 点击 允许
3.勾选 替换 子项 下面的 启用本地替换
4.修改 js 文件 并 ctrl + s 保存
5.你会发现 这个已经修改的 js 已经保存到本地了
6.这时候再刷新网页 修改的已经保存在本地的 js 就会执行了 也就是说不再加载远程的来自服务求的 js文件了
3.内容脚本
1.当前网址 满足的 插件js脚本文件
4.代码片段
1.新建一个代码片段 比如 hello
1.出入 console.log("abc")
2.ctrl + s 保存
2.任何调试状态下 按快捷键 ctrl + p 输入 !hello 回车都可以运行刚才的 代码片段
3.代码片段 不会随着 网站的变化 而发生 变化 一直存在
5.中间的代码区域
1.此地快捷键
1.ctrl + m 匹配括号
2.ctrl + f 局部 ctrl + shift + f 全局
2.此地 断点处 右键
1.继续执行到此处
2.添加断点
3.添加条件断点 比如 a > 22
4.添加日志断点 a,888,9999
3.此地 代码处 右键
1.在导航器边栏种显示 定位 此调试文件 在 网页 文件结构中的位置 (也可能是在替换中的位置 如果替换过的话)
2.在所属于打开
1.替换过的:在包含此文件的文件夹下打开
2.没有替换过的：在新的页面打开 等于重新请求一次
3.复制链接地址(本地 或者 网络)
4.复制文件名
4.选中部分代码后 右键
1.将代码 添加至表达式 [ctrl + shift + a]
2.在控制台 评估 所选文本
1.这个有点儿意思 代码可以 不执行到当前 但是也会在 控制台执行一下 执行后 代码还在之前断住的位置
2.有点儿类似 复制这个文本 粘贴到 控制台 回车 运行
6.最右边的 调试部分
1.最左边的箭头 隐藏调试程序(扩大代码区域视野)
2.跳过 进入 跳出 单步 禁止所有
3.可以添加 见识表达式 和 下面的眼睛差不多功能
4.断点区域 可以 勾选 或者 取消
5.作用域
6.调用堆栈
7.XHR 添加断点 (包含网址的一部分)
8.DOM 断点
1.在元素区域下面 添加的断点(子树 属性 移除) 在此处可以看到
9.事件监听器断点
1.在元素面板中 可以 添加的断点(子树 属性 移除) 但是无法对某个 元素添加 click 断点
1.除非进入 事件监听器 把代码跟进去 然后在代码上下断点
2.但是在此处是可以对 所有事件勾选 下 断点
5.网络
1.快捷键
1.在 副控制台 没有打开的情况下 ctrl + l 可以清理所有网络日志
2..最上排功能 控制
1.停用录制日志
2.清理日志 同 ctrl + l 功能
3.过滤
1.method:GET POST
2.domain:www.baidu.com
1.domain:*.baidu.com
3.可以用联合的模式
1.method:GET domain:*baidu.com
4.也可以输入 网址 上 有的任意东西
5.status-code:200
6.mime-type:image/jpeg
7.larger-than:1M
8.cookie
1.cookie-domain:
2.cookie-name:
3.cookie-path:
4.cookie-value:
9.has-response-header
1.has-response-header:Content-Type
2.has-response-header:Set-Cookie
10.response-header-set-cookie:
1.response-header-set-cookie:GJtGfLnQnkQaz0O
2.response-header-set-cookie:ZYF=
3.在返回头中所有 set-cookie 里面的内容 name value 都可以
11.scheme:https http
12.url:https://t15.baidu.com
1.注意和domain的区别
4.查找
1.和 过滤 不同 可以对 内容进 行查找 过滤只对 网址 进行
5.保留日志 停用缓存 网速 导出 导入 当前的 日志
3.过滤部分
1.第三方 大行(更新清晰 否则只能看到文件名)
4.注意
1.默认按时间排序 最早的在最上面 也可以按各个排序 单击即可
6.应用
1.各种存储
8.设置 右边 三个点 设置调试停靠侧
1.更多工具 (打开后 都会在 副调试面板后面加载出来)
1.网络状况
1.可以改变 UserAgent 和 访问客户端(ipad pc chrome mac)
2.停用缓存
3.网速
2.传感器
1.可以改变 位置 比如 London
2.屏幕方向
3.屏蔽网络请求
1.可以添加屏蔽规则 比如 *.baidu.com
1.所有访问百度的页面都访问失败了
4.图层 可以看到网页 分 哪几个框 基本无用
chrome 触发事件篇
function triggerAllEventsOnTelInput(selector) {
const telInput = document.querySelector(selector);
if (!telInput) {
console.error('No input[type="tel"] found with the given selector.');
return;
}
// 定义要触发的事件列表
const eventsToTrigger = [
'focus',
'input', // 代表任何字符输入
'keydown', // 假设一个按键按下
'keyup', // 假设按键抬起
'change', // 值改变后
'blur' // 失去焦点
];
// 模拟输入值改变
telInput.value = '123456789'; // 示例电话号码
// 依次触发每个事件
eventsToTrigger.forEach(eventName => {
const event = new Event(eventName, { bubbles: true, cancelable: true });
// 对于keydown和keyup，可能需要模拟具体的键值
if (eventName === 'keydown' || eventName === 'keyup') {
event.key = 'Digit0'; // 示例键值，可根据需要更改
event.keyCode = 48; // 对应于'Digit0'
event.which = 48; // 兼容老版本
}
telInput.dispatchEvent(event);
// 特别处理input事件，因为它可能需要在值改变后触发
if (eventName === 'input') {
// 确保更改被应用后再触发
setTimeout(() => {
telInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
}, 0);
}
});
// 失去焦点，模拟blur事件
telInput.blur();
}
// 调用函数，传入你的选择器
triggerAllEventsOnTelInput('input[type="tel"]');
