开发者社区> auqbllxiu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Chrome DevTools功能介绍

简介: 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

            </div>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Chrome DevTools功能介绍
Chrome DevTools功能介绍
41 0
chrome15调试-使用devtools作为代码编辑器
chrome15调试-使用devtools作为代码编辑器
20 0
如何使用Chrome DevTools花式打断点
如何使用Chrome DevTools花式打断点
130 0
你可能不知道的 Chrome Devtools 实用功能
今天来分享 Chrome DevTools 的10个实用调试功能!
96 0
Chrome 89 新功能一览,性能提升明显,大量 DevTools 新特性(上)
今天 Chrome 更新了最新版本 Chrome89,新版本在启动、响应速度上更快,同时 CPU 占用率大幅下降。 比如,提供前进后退缓存(20%的页面可瞬时进退)等特性,号称启动速度快了 25%、载入页面速度快了 7%、CPU 占用减少了 5 倍、可增加额外 1.25 小时续航,内存占用量也优化了。
80 0
Chrome 89 新功能一览,性能提升明显,大量 DevTools 新特性(下)
今天 Chrome 更新了最新版本 Chrome89,新版本在启动、响应速度上更快,同时 CPU 占用率大幅下降。 比如,提供前进后退缓存(20%的页面可瞬时进退)等特性,号称启动速度快了 25%、载入页面速度快了 7%、CPU 占用减少了 5 倍、可增加额外 1.25 小时续航,内存占用量也优化了。
83 0
Chrome DevTools功能介绍
Chrome DevTools功能介绍
96 0
Node.js 应用故障排查手册 —— 正确打开 Chrome devtools
前面的预备章节中我们大致了解了如何在服务器上的 Node.js 应用出现问题时,从常规的错误日志、系统/进程指标以及兜底的核心转储这些角度来排查问题。这样就引出了下一个问题:我们知道进程的 CPU/Memory 高,或者拿到了进程 Crash 后的核心转储,要如何去进行分析定位到具体的 JavaScript 代码段。
1725 0
20个Chrome DevTools调试技巧
译者按: Chrome DevTools很强大,甚至可以替代IDE了! 原文: Art of debugging with Chrome DevTools 译者: Fundebug 为了保证可读性,本文采用意译而非直译。
1359 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载