Skip to content

Commit c9a62ae

Browse files
soyainesoyaine
committed
complete 09 guide
1 parent fe1f7de commit c9a62ae

4 files changed

Lines changed: 349 additions & 0 deletions

File tree

‎09 - Dev Tools Domination/README.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# 09 Console 调试技巧指南
2+
3+
> 作者：©[缉熙Soyaine](https://github.com/soyaine)
4+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 9 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
5+
6+
> 创建时间：2017-01-06
7+
最后更新：2017-01-06
8+
9+
## 实现效果
10+
11+
这个部分主要是实践了一些在 Console 面板里的调试技巧，如果硬要说什么实现效果的话，那可能就是……“必备！你不得不知道的 10 种炫酷调试技巧！”建议直接打开[页面]()后按 F12 查看各种输出结果。
12+
13+
## 过程指南
14+
15+
#### 给页面标签添加断点
16+
17+
在按 F12 出现的 Chrome 开发工具中，在 Elements 选项卡之中，选择页面的某个标签（以 `<p>`为例），右键 → Break on → Attributes modifications。即可为该元素添加断点，当它的属性发生改变时，会自动定位到页面代码中的对应行。
18+
19+
你如此设置之后，点击页面中的文字试一试效果。
20+
21+
#### `.log` 的更多用法
22+
23+
这个是最常用的，但它还有一些更多功能：比如参数支持类似 C 语言的字符串替换模式。
24+
25+
- `%s` 字符串
26+
- `%d` 整数
27+
- `%f` 浮点值
28+
- `%o` Object
29+
- `%c` 设定输出的样式，在之后的文字将按照第二个参数里的值进行显示
30+
31+
```js
32+
console.log("输出一个字符串 %s ", "log");
33+
console.log("输出一个整数是 %d ", 1.23); //1
34+
console.log("输出一个小数是 %d ", 1.23); //1.23
35+
console.log("%c不同样式的输出效果", "color: #00fdff; font-size: 2em;");
36+
```
37+
38+
#### 不同样式的输出
39+
40+
除了常规的 `log` 之外，还有一些其他已设定好的样式，区别在于图标或者颜色不一样：
41+
42+
```js
43+
// warning!
44+
console.warn("三角感叹号图标，淡黄色背景")
45+
// Error :|
46+
console.error("红叉图标，红字红色背景");
47+
// Info
48+
console.info("蓝色圆形感叹号图标");
49+
```
50+
51+
#### 打印输出 DOM 元素
52+
53+
获取 DOM 元素之后，也可以打印输出。
54+
55+
```js
56+
const p = document.querySelector('p');
57+
console.log(p);
58+
console.dir(p);
59+
```
60+
61+
不同的地方在于，`log` 输出这个 DOM 的 HTML 标签，而 `dir` 则会输出这个 DOM 元素的属性列表。
62+
63+
#### asset 方法进行测试
64+
65+
接受一个表达式作为参数，如果参数返回值是 false，则会输出第二个参数中的内容。
66+
67+
```JS
68+
console.assert(1 ===1, "（这句发布时删除）");
69+
console.assert(1 ===0, "看看看，失策了吧");
70+
console.assert(p.innerHTML.match("她"), "我这儿才没有她这个人");
71+
```
72+
73+
#### 以更清晰的形式输出数据
74+
75+
此前的文章中已经提到了 `console.table()` 方法，可以将数组、对象以表格的形式打印输出，如果只输出其中的某一列，可以加上第二个参数，示例如下。
76+
77+
```js
78+
console.table(dogs);
79+
console.table(dogs, ["age"]);
80+
```
81+
82+
除了按表格，还可以将数据分组展示，直接看例子：
83+
84+
```js
85+
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
86+
dogs.forEach(dog => {
87+
console.group();
88+
// console.groupCollapsed(); // 收起列表
89+
console.log(`${dog.name}`);
90+
console.log(`${dog.age}`);
91+
console.log(`${dog.name} 有 ${dog.age} 岁了`);
92+
console.groupEnd();
93+
});
94+
```
95+
96+
这个例子中，`group()`/`groupCollapsed()` 与 `groupEnd()` 之间的内容会自动分组，区别在于是否自动展开。效果类似于 Excel 中的分类汇总的简易版。
97+
98+
#### `count` 计数
99+
100+
这里的计数对象仅限于由 `count()` 输出的内容，并非所有 console 中的输出。
101+
102+
#### `time` 计时
103+
104+
用 `time("name")` 和 `timeEnd("name")` 分别控制开始点和结束点，它们两的参数表示当前计时的名称，可以自定义但需要保持相同。所以如果想看异步获取数据花了多场时间，可以这样写：
105+
106+
````js
107+
console.time('fetch my data');
108+
fetch("https://api.github.com/users/soyaine")
109+
.then(data => data.json())
110+
.then(data => {
111+
console.timeEnd('fetch my data');
112+
console.log(data);
113+
});
114+
````
115+
116+
如果 timeEnd 中的名称如果和上面不一样，得到的数据是系统当前时间换算后的毫秒值。
117+
118+
**~\(≧▽≦)/~调试技巧这部分就结束啦，拿起宝剑去开疆扩土吧~**

‎09 - Dev Tools Domination/index-FINISHED.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Console Tricks!</title>
6+
</head>
7+
<body>
8+
9+
<p onClick="makeGreen()">×BREAK×DOWN×</p>
10+
11+
<script>
12+
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
13+
14+
function makeGreen() {
15+
const p = document.querySelector('p');
16+
p.style.color = '#BADA55';
17+
p.style.fontSize = '50px';
18+
}
19+
20+
// Regular
21+
console.log('hello');
22+
23+
// Interpolated
24+
console.log('Hello I am a %s string!', '💩');
25+
26+
// Styled
27+
// console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')
28+
29+
// warning!
30+
console.warn('OH NOOO');
31+
32+
// Error :|
33+
console.error('Shit!');
34+
35+
// Info
36+
console.info('Crocodiles eat 3-4 people per year');
37+
38+
// Testing
39+
const p = document.querySelector('p');
40+
41+
console.assert(p.classList.contains('ouch'), 'That is wrong!');
42+
43+
// clearing
44+
console.clear();
45+
46+
// Viewing DOM Elements
47+
console.log(p);
48+
console.dir(p);
49+
50+
console.clear();
51+
52+
// Grouping together
53+
dogs.forEach(dog => {
54+
console.groupCollapsed(`${dog.name}`);
55+
console.log(`This is ${dog.name}`);
56+
console.log(`${dog.name} is ${dog.age} years old`);
57+
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
58+
console.groupEnd(`${dog.name}`);
59+
});
60+
61+
// counting
62+
63+
console.count('Wes');
64+
console.count('Wes');
65+
console.count('Steve');
66+
console.count('Steve');
67+
console.count('Wes');
68+
console.count('Steve');
69+
console.count('Wes');
70+
console.count('Steve');
71+
console.count('Steve');
72+
console.count('Steve');
73+
console.count('Steve');
74+
console.count('Steve');
75+
76+
// timing
77+
console.time('fetching data');
78+
fetch('https://api.github.com/users/wesbos')
79+
.then(data => data.json())
80+
.then(data => {
81+
console.timeEnd('fetching data');
82+
console.log(data);
83+
});
84+
85+
console.table(dogs);
86+
87+
</script>
88+
</body>
89+
</html>

‎09 - Dev Tools Domination/index-SOYAINE.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Console 面板调试技巧</title>
6+
</head>
7+
<body>
8+
9+
<p onClick="makeGreen()">×点×我×呀×</p>
10+
11+
<script>
12+
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
13+
14+
function makeGreen() {
15+
const p = document.querySelector('p');
16+
p.style.color = '#BADA55';
17+
p.style.fontSize = '50px';
18+
}
19+
20+
// Regular
21+
// 常规输出
22+
console.log("我只是 console 世界的一介草民");
23+
24+
// Interpolated
25+
// 字符替换
26+
console.log("我的名字叫做 %s ", "log");
27+
console.log("我的名字叫做 %d ", 1.23);
28+
console.log("我的名字叫做 %o ", {1.23: 12});
29+
30+
// Styled
31+
// 设定输出的样式
32+
console.log("偷偷告诉你，我会变身 %c ~\(≧▽≦)/~巴拉拉~~", "color: #00fdff; font-size: 2em;");
33+
34+
// warning!
35+
console.warn("warning! 我可警告你哦~")
36+
37+
// Error :|
38+
console.error("error~别又来报错了！╭(╯^╰)╮");
39+
40+
// Info
41+
console.info("Talk is cheap. Show me the code");
42+
43+
// Viewing DOM Elements
44+
// 打印输出 DOM 元素
45+
const p = document.querySelector('p');
46+
console.log(p);
47+
console.dir(p);
48+
49+
50+
// Testing
51+
console.assert(1 ===1, "（这句发布时删除）");
52+
console.assert(1 ===0, "看看看，失策了吧");
53+
console.assert(p.innerHTML.match("她"), "我这儿才没有她这个人");
54+
55+
// clearing
56+
// console.clear();
57+
58+
59+
60+
// Grouping together
61+
dogs.forEach(dog => {
62+
console.group();
63+
// console.groupCollapsed(); // 收起列表
64+
console.log(`${dog.name}`);
65+
console.log(`${dog.age}`);
66+
console.log(`${dog.name} 有 ${dog.age} 岁了`);
67+
console.groupEnd();
68+
});
69+
70+
//
71+
console.table(dogs);
72+
console.table(dogs, ["age"]);
73+
74+
// counting
75+
console.count("（读来过反）羊只");
76+
console.count("（读来过反）羊只");
77+
console.count("（读来过反）鱼条");
78+
console.count("（读来过反）羊只");
79+
console.count("（读来过反）羊只");
80+
console.count("（读来过反）鱼条");
81+
console.count("（读来过反）鱼条");
82+
console.count("（读来过反）羊只");
83+
84+
// timing
85+
console.time('fetch my data');
86+
fetch("https://api.github.com/users/soyaine")
87+
.then(data => data.json())
88+
.then(data => {
89+
console.timeEnd('fetch my data');
90+
console.log(data);
91+
});
92+
// console.timeEnd('fetch my data');
93+
94+
</script>
95+
</body>
96+
</html>

‎09 - Dev Tools Domination/index-START.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Console Tricks!</title>
6+
</head>
7+
<body>
8+
9+
<p onClick="makeGreen()">×BREAK×DOWN×</p>
10+
11+
<script>
12+
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
13+
14+
function makeGreen() {
15+
const p = document.querySelector('p');
16+
p.style.color = '#BADA55';
17+
p.style.fontSize = '50px';
18+
}
19+
20+
// Regular
21+
22+
// Interpolated
23+
24+
// Styled
25+
26+
// warning!
27+
28+
// Error :|
29+
30+
// Info
31+
32+
// Testing
33+
34+
// clearing
35+
36+
// Viewing DOM Elements
37+
38+
// Grouping together
39+
40+
// counting
41+
42+
// timing
43+
44+
</script>
45+
</body>
46+
</html>

0 commit comments

Comments
 (0)