Chrome开发者工具
样式篇
查看元素的CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
border: 1px dashed #ff0000;
padding: 10px;
}
.box:hover{
border: 1px solid #00ff00;
}
</style>
<body>
<div class="box">检查我!</div>
</body>
</html>
元素面板上的Styles选项卡列出了应用在当前Dom树选择的任何元素的css规则。被检查的元素在DOM 树中以蓝色突出显示
向元素添加css声明
点击样式 element.style,键入background:#00ffff;
向元素添加css类
单击.cls,在输入框中输入类名称
向类添加为状态
在样式选项卡中，单击 :hov。
修改元素的尺寸
双击Box Model中的需要修改的地方，盒子模型默认为像素，但它也接受其他值，例如25%、 或10vw
查看外部样式
仅查看实际应用于元素的 CSS
如果您对覆盖的声明不感兴趣，请使用计算属性选项卡仅查看实际应用于元素的CSS。
新增样式规则
使用拾色器
单击小方块预览以打开拾色器
使用角度时钟更改角度值
css概览面板
检查动画
检查CSS网格grid
检查cssFlex布局
控制台篇
控制台有 2 个主要用途：查看记录的消息和运行 JavaScript
控制台Api
console.clear()
清空控制台
console.count();
写入count()已在同一行以相同的label. 调用console.countReset([label])重置计数。
console.assert(expression, object)
const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});
console.dir(object)
打印指定对象的 JSON 表示。
const obj ={
name:"xu",
age:12
}
console.dir(obj)
console.group(label)
视觉上将消息组合在一起，直到console.groupEnd(label)被调用。用于console.groupCollapsed(label)在最初登录到控制台时折叠组。
const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);
console.table(array)
将对象数组记录为表。
console.table([
{
first: 'René',
last: 'Magritte',
},
{
first: 'Chaim',
last: 'Soutine',
birthday: '18930113',
},
{
first: 'Henri',
last: 'Matisse',
}
]);
console.time([label])
启动一个新的计时器。调用console.timeEnd([label])以停止计时器并将经过的时间打印到控制台。
console.time();
for (var i = 0; i < 100000; i++) {
let square = i ** 2;
}
console.timeEnd();
console.trace()
将堆栈跟踪打印到控制台。
const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();
console.warn()
向控制台打印警告。
console.warn('warn');
console.warn()
向控制台打印错误。
console.error('error');
控制台实用程序Api
$_
$_返回最近计算的表达式的值。
$(selector, [startNode])
$(selector)返回对具有指定 CSS 选择器的第一个 DOM 元素的引用。当使用一个参数调用时，此函数是document.querySelector()函数的别名。
$$(selector, [startNode])
$$(selector)返回与给定 CSS 选择器匹配的元素数组。此命令等效于调用document.querySelectorAll()。
$x(path, [startNode])
与其他选择器函数类似，$x(path)有一个可选的第二个参数 ，startNode它指定要从中搜索元素的元素或节点
dir(object)
dir(object)显示所有指定对象属性的对象样式列表。此方法是控制台 APIconsole.dir()方法的别名。
dir(document.body);
