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{
    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）源代码断点

    
    
    
    计算
    

    
        // 选取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;
        })
    

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