Chrome DevTools功能介绍
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