Chrome DevTools功能介绍

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mouday/article/details/99692389

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

展开阅读全文

没有更多推荐了,返回首页