# 谷歌浏览器
# igg_install 安装助手
按照给的教程 安装好 可以进入 应用商店 (opens new window)
进入商店 可以下载一些chrome的插件 比如：Vue.js devtools
# 开发者工具
常用的Tab
- Element
- Console
- Source
- Network
- Vue/React
# 打开Dev Tool
- 菜单 - 更多工具 - 开发者工具
- 快捷键 F12
- 右键 - 检查
进入
# 打开命令菜单
在 F12 打开的面板上 打开的这个命令菜单
- 快捷键 CTRL + SHIFT +P
# 命令菜单中 可以的操作
- 输入theme，可以修改主题
- 输入Dock 可以看见 Dock to left ,就是将开发者工具的面板放在窗口的左边
- 截图 ： 输入
screenshot，Capture full size screenshot ... 可以实现整个网页截图
# Element Css调试
# 定位
1. 在element面板：
- 选中要检查的内容 - 右键 - 检查 ,会自动定位到对应的位置上
在这个面板中 输入 CTRL + F,可以在输入框中
输入文本、css选择器、Xpath(//表示根 /表示下一级)
2. 在console面板：
在这个面板 输入 类似于inspect(document.querySelector('#box')) 也会跳转到elemnet面板且定位到
# 编辑样式
# styles面板
# 1.让:hover常驻
1.定位到对应的元素
2.点击：hov 选择：hover
3.对应的元素就会一直处于悬停
# 2.编辑class
情况： 程序中 会有class复用的情况 在element面板中如果直接修改此class的样式，全部会一起变化修改
解决： .cls - 去掉不想要的样式
# 3.复制样式
定位到对应的元素，复制样式
# computed 面板
所有的样式都放在一块儿，可以输入筛选
show all 可以显示继承的样式 group 将样式分组而已
# layout 面板(布局)
Grid
Flexbox
# console 控制台
CTRL + SHIFT + J
- 执行语句 可以直接在控制台中 输入
- $_ 上一条语句
- $0 上一个选择的DOM节点($1,$2...)
- console.log (error warn table clear group time assert trace)
小眼睛 监听变量
# sources
# debugger
在代码中有debugger,运行的时候会停下来
自己也可以打断点
- 三角箭头 : 一个断点一个断点的往下，直到结束
- 有弧度的箭头 ：一行代码一行代码的往下
# watch
watch : 可以实时的监测变量
# call stack
选择忽略那一项，可以只专注于自己写的代码文件中
# network
| 属性 | 作用 |
|---|---|
| status | 服务器返回的状态码 |
| initiator | 是谁发起的请求 |
# preserve log
这个选上 会将历史的发送请求都保留下来，比如在开发页面跳转的项目的时候
# 节流器 No throtting
一开始 默认显示的是 No throtting 模拟网络的速度
# applicaton
- local storage
- session storage
- cookies
localStorage.setItem("name","xxx")
localStorage.getItem("name")
document.cookie = "username=xxx"
1
2
3
4
2
3
4
# chrom的快捷键记录
# 标签页和窗口快捷键
- 打开新窗口 Ctrl + n
- 关闭当前窗口 Ctrl + Shift + w
- 打开新的标签页，并跳转到该标签页 Ctrl + t
- 关闭当前标签页 Ctrl + w
- 打开当前标签页浏览记录中记录的上一个页面 Alt + 向左箭头
- 打开当前标签页浏览记录中记录的下一个页面 Alt + 向右箭头
- 跳转到下一个打开的标签页 Ctrl + Tab 或者 Ctrl + PgDn
- 跳转到上一个打开的标签页 Ctrl+ Shift + Tab 或者 Ctrl + PgUp
# 功能快捷键
- 打开 Chrome 菜单 Alt+ f 或者 Alt+ e
- 显示或隐藏书签栏 Ctrl+ Shift + b
- 打开书签管理器 Ctrl+ Shift + o
# 网页快捷键
- 开启或关闭全屏模式 F11
- 将当前网页保存为书签 Ctrl + d
- 将所有打开的标签页以书签的形式保存在新文件夹中 Ctrl+ Shift + d