Chrome DevTools功能介绍
1、Elements 元素：检查、调整页面，调试DOM，调试CSS
2、Network 网络： 调试请求，了解页面静态资源分布，网页性能检测
3、Console 控制台：调试JavaScript、查看log日志，交互式代码调试
4、Sources 源代码资源：调试JavaScript页面源代码，断点调试
5、Application 应用： 查看调试客户端存储，Cookie，LocalStorage，SessionStorage
6、Performance 性能：查看页面性能细节，细粒度对网页载入进行性能优化（高阶）
7、Memory 内存 CPU分析，内存堆栈分析器（高阶）
8、Security 安全：页面安全，证书
9、Audits 性能分析，使用Google Lighthouse辅助性能分析，给出优化建议（高阶）
打开Chrome开发者工具方式
1、菜单 -> 更多工具 -> 开发者工具
2、页面右键 -> 检查
3、快捷键
（1）打开最近关闭的状态
Mac： Command + Option + I
Windows： Ctrl + Shift + I
（2）快速进入Elements查看DOM或样式
Mac：Command + Option + C
Windows： Ctrl + Shift + C
（3）快速进入Console查看log运行JavaScript
Mac：Command + Option + J
Windows： Ctrl + Shift + J
（4）切换开发者工具位置
Mac：Command + Option + D
Windows： Ctrl + Shift + D
在Console中访问DOM节点
1、document.querySelectAll
2、使用$0访问选中的元素
3、拷贝 -> JS Path
在DOM中断点调试
1、属性修改时打断点 break on -> attribute modifications
2、节点删除时打断点 break on -> node removal
3、子树修改时打断点 break on -> subtree modifications
CSS调试
1、提升优先级
!important
2、动画效果
animation.css
https://daneden.github.io/animate.css/
Console面板
1、运行JavaScript代码，交互式编程
2、查看程序中打印的Log日志
3、断点调试代码Debugging
// 查看cookie document.cookie // 选择元素 document.querySelectorAll("img") // shift + enter 换行不执行 // 斐波那契 var fibo = function(n){ return n<3 ? 1 : fibo(n-1) + fibo(n-2); }
Console打印Log日志
// 1、信息 ,支持多个参数 console.log("hello", ", ", "world") // hello , world // 变量替换 var s = "hi"; console.log("%s hello", s); // hi hello // 2、警告 console.warn() // 3、错误 console.error() // 4、表格形式打印json console.table({name: "tom"}) // 5、group信息组 console.group("start"); console.log("log"); console.info("info"); console.groupEnd("start"); // 6、自定义样式 console.log("%c这是绿色的日志", "color: green") document.querySelector("#log").addEventListener("click",()=>{ console.log("log"); }) // 断言 console.assert(1===2) // 运行时间 console.time() // do something console.timeEnd() // 清屏 console.clear()
调试JavaScrip基本流程
1、console.log() 或者 alert() 运行时调试
2、JavaScript断点调试
3、运行时变量调试，修改源代码临时保存调试
（1）debugger
（2）事件断点
（3）源代码断点
<html> <body> <!-- 计算器实例 --> <input type="text"> <input type="text"> <button>计算</button> <p></p> <script> // 选取button元素 var button = document.querySelector("button"); // 添加按钮点击事件 button.addEventListener("click", () => { var inputs = document.querySelectorAll("input"); let a = parseInt(inputs[0].value); let b = parseInt(inputs[1].value); document.querySelector("p").textContent = a + b; }) </script> </body> </html>
Snippets
// 添加jQuery let script = document.createElement("script"); script.src="https://code.jquery.com/jquery-3.4.1.js"; // 防止 CDN 篡改 javascript script.integrity = "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="; // 会发起一个跨域请求（即包含Origin: HTTP头）。 // 但不会发送任何认证信息（即不发送cookie, X.509证书和HTTP基本认证信息）。 // 如果服务器没有给出源站凭证（不设置Access-Control-Allow-Origin: HTTP头），这张图片就会被污染并限制使用。 script.crossOrigin = "anonymous"; document.head.appendChild(script);
Application客户端存储
1、Cookies
// 添加cookie document.cookie="a=2" // 获取cookie document.cookie
https://www.runoob.com/js/js-cookies.html
2、LocalStorage 永久存储
LocalStorage.getItem("key") LocalStorage.setItem("key", "value")
3、SessionStorage 临时存储
sessionStorage.setItem("key", "value") sessionStorage.getItem("key")
其他
网页截屏
comamnd + shifit +p
搜索 Capture full size screenshot
移动端开发调试
Sensors
NetWork conditions
