浏览器技巧
一、快捷键
- ctrl + R ----- 刷新页面
- ctrl + W ------关闭页面
- ctrl + J ----- 打开下载页面
- ctrl + H -----打开历史记录
- ctrl + K ---- 快捷搜索
- ctrl + 1-9 ---- 快速切换tab
- ctrl + shift + T -------打开上一次关闭的页面
- ctrl + shift + J -------打开f12控制台
- ctrl + shift + C ------快速查看元素
- ctrl + shift + delete --- 清除浏览器历史记录
f12控制台常用快捷键
ctrl + [ | ] ------切换tab栏
ctrl + L ------清除控制台
ctrl + shift + M ------打开手机浏览
ESC ---- 打开控制台底部的控制栏
二、小技巧
通过按ctrl+shfit+c可以选中浮动的元素；
打开f12，在elments，按下ctrl+f，可以通过输入选择器来找到选择到的元素；
可以通过双击盒模型直接修改border、margin值；
在style编辑面板中
上方向键 / 下方向键可以使属性值以 1 递增 / 递减
ALT + 上方向键 / 下方向键可以使属性值以 0.1 递增 / 递减
SHIFT + 上方向键 / 下方向键可以使属性值以 10 递增 / 递减
CTRL + 上方向键 / 下方向键可以使属性值以 100 递增 / 递减
在f12中，通过按住shfit点击颜色，可以切换颜色的显示值；
获取hover tips方法
- 打开控制台，切换到source tab
- 按暂停代码，由于hover中没法按，可以使用快捷键command+F8
三、console的用法
console对象的所有属性
console.log('信息是：%s',str)；可以直接将str变量放进%s位置；
console.clear()：清空控制台
console.assert(v, '') // 当v为假时,输出后面的字符串,否则无输出
console.table()：以table形式输出对象
console.group()：以分组形式输出
console.warn()：以warn形式输出
console.error()：以error形式输出
console.count()：统计代码被执行的次数
console.trace()：显示当前执行的堆栈调用路径,放在最后一个调用的函数中；
console.time()：用来计时一个方法运行多长时间，使用timeEnd来结束；
console.time('func')
console.timeEnd('func') // 里面名字需要填写一样的;
console.dir()：直观的展示一个对象的所有属性和方法console.dir
当输出dom元素时，显示的是dom元素的对象属性，当console.log则是标签；
console.table()
第一个可以传入对象或数组，第二个参数可选，可以单独放入想要展示的内容；
$符的用法
console里面可以直接使用$符获取元素，跟jquery操作方式一样，
- $：相当于querySelector，获取元素
- $$：相当于querySelectorAll，获取一组元素
- $0-4：获取最近5个选择过的dom节点
- $_：返回最近一次表达式执行的结果
其他简写：
- dir、keys、values
copy
copy(document.body)，将获取到的内容复制到剪贴板，可以粘贴到任意地方
鼠标对对象使用右键 Store as global variable，可以直接将一个对象给复制到剪贴板
monitor 事件监听
monitor & unmonitor，接收一个函数名作为参数，当该函数被执行，就会被监听到，unmonitor用来停止监听的；
monitorEvents 事件监控
monitorEvents&unmonitorEvents，一个为监控事件，一个为解除监听，第一个参数为选中的元素，第二个参数为事件，也可以是数组
monitorEvents(window, 'resize')
monitorEvents(window, ['resize', 'scroll'])第二个参数也可以放入类型；
| 类型 | 事件 |
|---|---|
| mouse | "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel" |
| key | "keydown", "keyup", "keypress", "textInput" |
| touch | "touchstart", "touchmove", "touchend", "touchcancel" |
| control | "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset" |
JSON.stringify来输出格式
使用它的第三个参数，让显示更有格式化效果；
对象需要展开
当查看对象的时候，需要展开才能查看，大大的影响开发效力
原因：(...)是get/set类的属性，点击后出现是当前的值，不一定输出log的时候的值，如果想直接看log时的值，需要console.log(JSON.parse(JSON.stringify($var)))；
页面跳转保留控制台输出
一般用于调试跳转之后输出的内容；
点击右侧小齿轮，之后开启Preserve log即可；
四、断点篇
启动断点
启动断点的方式如下：
通过在代码里面加debugger，之后就能进入断点
通过浏览器搜索代码，然后手动打断点
搜索之后点击代码左侧的小数字即可断点
断点操作
- 1号区域为断点操作区域，从左至右依次操作为：
- 1：继续执行代码，如果后面还有断点则会跳到下一个断点
- 2：逐行执行，不会跳到方法内部
- 3：下一步执行，会跳到方法内部
- 4：跳出当前函数
- 5：逐行执行，与2差不多
- 禁止断点，不进入debugger
- 2号区域为当前的变量属性（查看变量值可以hover变量也能显示）
- 3号区域查看调用栈，可以往上追溯是如何执行到该位置的
element元素断点
- subtree moditications：当添加改变删除元素时触发
- Attribute modifications：元素属性改变时触发
- Node removal：移除这个dom元素时触发
当通过js操作时，会被跳到当前断点；
黑匣子
当我们打断点时，会跳到源码里面绕一大圈，最终找不到我们想要的东西，无法很快定位到错误的地方，chrome提供了一个黑匣子（黑名单），在源码文件点击之后，下次跳转就不会进来了；
还可以到设置中，可以自己加需要忽略的库或文件
将以下两个加入到黑匣子，可以解决大部分断点跳插件的问题
node_modules
\.minxhr/fetch断点
也可以直接对network进行断点
五、浏览器插件分享
- GitHub Hovercard github增加头像查看author，支持多种悬浮窗
- Adblock Plus 谷歌广告拦截
- Astar 免费翻墙，可看youtube
- 下载+ 下载管理工具
- octotree github左侧固定文件树
- gitako 也是文件树，还支持代码折叠
- OctoLinker github代码支持点击路径跳转，支持package.json点击到对应仓库
- Octohint github按住方法跳转，还支持类型显示
- Ajax Interceptor 修改后端接口响应值
- XSwitch 地址转发请求
- Material Icons for GitHub github版的文件图标
- smartUp手势 增加鼠标右键支持快捷操作
- 云盘万能钥匙 自动输入百度网盘密钥
- Tampermonkey 油猴 支持安装更多的插件插入脚本，非常好用
- Infinity 新标签页 新增标签添加快速访问，支持书签关键字搜索
- Pesticide 快速查看页面布局信息
- 一键管理扩展 当扩展过多时，使用该插件非常方便
- Talend API 浏览器版本的Postman
$i 浏览器使用npm插件
安装地址：Console Importer
六、codebox
在浏览器快速写代码，可以按ctrl+enter即可进行输出了；
七、修改devtools默认主题
- 地址输入url：
chrome://flags/#enable-devtools-experiments，搜索Developer Tools experiments并启用； - 控制台中使用
F1打开设置，切换到Experiments选项，启用Allow custom UI themes - 从chrome商店搜索安装：
Material DevTools Theme Collection扩展程序，之后选择喜欢的主题进行重启即可；（如果选中的是带Dark的主题，需要切换对应的默认主题，在settings-->preferences-->theme选项卡；
其他技巧
- 选中节点之后，点击Event Listeners，可以查看当前元素包括冒泡的所有事件，取消勾选Ancestors All之后，可以查看当前元素的所有事件
