课程大纲
Elments元素页面
Network网络面板
Console控制台面板
Sou rces源代码资源面板(js断点调试)
Appkication应用面板
Performance性能面板(性能优化)
Memory内存面板
Security安全面板(证书查看)
Audits面板
打开chrome开发者工具(更多工具-开发者工具;右键-检查;快捷键ctrl+shift-i;查看dom或样式:control+shift+c;进入console查看log运行:control+shift+j;f12)
调试dom
- 查看与选择dom节点
Ctrl+f搜索 - 实时编辑html和dom节点
*placeholder带有文本的搜索字段
- Console访问节点
使用Document .querySelectorAll(‘ ’)
$0
拷贝 Js-path - 断点dom调试
属性修改break-on ->attribute modifications
节点删除break-on ->Node removal
子树修改break-on ->subtree modifications
调试样式css
- 查看和编辑css
被划掉的css(被级别更高的) - 增加类和伪类
:hov 增加类:Active,Hover,focus,vistied,focus-within
.cls增加一个类 - 调试css图形颜色
Transition:1s all ease-in-out(animations.css)
调试javascript
- 运行,交互性
Document.cookie(浏览器信息) - 查看打印的log日志
Console.log打印信息(输入多个信息自动连接)
Console.warn警告信息(标黄)
Console.error错误信息(红色)-在一场逻辑中catch主的错误信息使用
Console.table展示json格式的复杂信息
Console.group信息组展示(groupend)
Console custom定制样式
Console.assert断言(false,‘断言失败‘)
Console.time 精确时间
Network网络请求错误展示
Console.cleared清除 - 断点调试debugging
传统的console.log()和alert()打印运行时间信息调试
Js断点调试(debugger,step over)
运行保存(console下可以运行) - Sourous面板(实时编辑)
Page(查看对应页面,ctrl+p打开,ctrl+shift+p命令行, - 使用snippets来辅助debugging
$(‘’)动态加入基础库等
*test打印 - 使用devtools作为代码编辑器
Add folder to workspace
网络network调试 - Network面板简介
查看网页资源分布
正对某一请求request或时间消耗
分析网页性能优化,使用工具代理页面请求数据等 - Network查看站点网络
Stop recording network log加载相应的log日志
Clear清除
Capture screenshots页面加载中的截图
Filter 过滤(默认all,xhr-header头部,timing排队的时间等,依步请求)
底部:请求数量,资源,dom和load时间 - Network waterfall分析页面载入性能
请求概括(优化)
客户端储
- application面板
Application
Storage-cookie网址
Cache
Frames () - 查看localstorage与sessionstorage
Storage下域名
Name删选key和value修改
Localstorage.getltem
移动端hs
- Toggle device toolbar ctrl+shift+m
Responsive(切换设备) - H5编写ctrl+shift+p
Sensors(传感器模拟)geoLocation地址OrientationTouch
Network condition()caching
结合recat/vue
- Rea ct插件
- 集成vue插件
Vue.js devtools