-
使用Snippets来辅助Debuggin步骤:
1)添加文件
2)添加代码JQ库
3)运行
4)切换Networ
5)到Source添加代码
查看全部 -
Sources源代码资源面板:
page:所有页面相关静态资源
展示代码面板:{}格式化代码
查看全部 -
断点调试代码Debugging
传统的console.log()或alert()打印运行时信息调试
需要在源代码和执行页面中切换执行.步骤繁琐不方便
JS断点调试
1)代码加 debugger:内置断点语句
1⃣️恢复脚本执行2⃣️跳过下一个函数的执行3⃣️进入下一个函数的执行4⃣️跳出函数5⃣️单步执行
2)1⃣️调用的栈2⃣️断点3⃣️异步请求断点4⃣️DOM断点5⃣️事件监听断点
3)代码行数点击断点
Scope:展示当前作用域下的值:
运行时变量调试,修改源代码临时保存调试
直接在源代码区域中编辑代码,保存
查看全部 -
在Console中调试log信息:
console.log:打印普通log日志信息;
console.warn:打印警告信息
console.error:打印错误信息
console.table:打印表格信息
console.qroup+console.info+console.grounpEnd:打印信息组
console.log("%c这里展示定时的样式",styles)console Custom定制样式
cause 404:Network网络请求错误展示
console.assert(false,'断言'):断言类似于try catch语句
console.time():+console.函数名(参数)+console.timeEnd() :检测代码片段执行时间
查看全部 -
使用Console调试JsvaScript:
1、运行JavaScript代码,交互式编程(Shift+回车不会执行,继续写代码)
document.cookie:查询cookie信息
document.querySelectorAll('img'):查询元素信息
运行JS测试等
2、查看程序中打印的log日志
3、断点调试代码Debugging
查看全部 -
实时编辑CSS(3)以及动画效果
推荐网站:animation.com
查看全部 -
在DOM中断点调试:
属性修改时打断点:break on -> attribute modifications
节点删除时打断点:break on -> node removal
子树修改时打断点:break on -> subtree modifications
查看全部 -
在Console中访问节点:
使用document.querySelectAll访问
使用$0快速访问选中的元素
拷贝 -> JS Path
查看全部 -
实时编辑HTMl和DOM节点:
编辑内容
编辑属性Attributes
修改元素类型
调整DOM节点顺序
像编辑器一样编辑HTML代码
隐藏/删除/增加/拷贝节点
查看全部 -
打开工具:
查看全部 -
9大功能面板:
1、Elements元素面板:检查和调整页面,调试DOM,调试CSS
2、Network网络面板:调试请求,了解页面静态资源分布,页面性能检测
3、Console控制台面板:调试javascript,查看console log日志,交互式代码调试
4、Sources源代码资源面板:调试javascript页面源代码,进行断点调试代码(利于解决Bug)
5、Application应用面板:查看&调试客户端存储,如cookie,localStorage,sessionStroage等
6、Performmance性能面板:查看网页性能细节,细粒度对网页载入进行性能优化(高阶)
7、Memory内存面板:javascript CPU分析器,内存堆分析器(高阶)
8、Security安全面板:查看也吗安全及证书问题
9、Audits面板:使用Google Lighthouse辅助性能分析,给出优化建议(高阶)
查看全部 -
Chrome DecTools开发人员工具
查看全部 -
页面加载性能
network-waterfall网页性能分析
JS压缩混淆
图片使用懒加载
查看全部 -
前端
后端响应等待时间
网页性能优化，使用工具代理页面请求数据
查看全部 -
动画效果网站：
Animate.css
查看全部
举报