JavaScriptのデバッグメモ

## 概要
JSConfの動画を見て、便利そうだと思ったので個人的メモします。
動画は[こちら](https://www.youtube.com/watch?v=TtsvMRxmfGA&feature=youtu.be)

## Chrome DevTools
### console.log
変数をログで吐き出す時に、オブジェクトにするとキー・バリューで見れる。

```javascript
const name = 'Hiroshi';
const age = 40;

console.log({ name, age });
```
<img width="323" alt="Screen Shot 2019-10-23 at 22.20.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/74960871-1cd0-091f-c883-c9a9b103a31b.png">

色付け

```javascript
console.log(`%c${name}`, 'background-color: red; color: white;');
```
<img width="292" alt="Screen Shot 2019-10-24 at 10.17.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/81ef4a3b-151a-4c6c-dd7f-a9975f26f7fa.png">

※残念ながらオブジェクトは[object Object]になります。
<img width="253" alt="Screen Shot 2019-10-24 at 10.19.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/83fe6e7f-1e76-4976-74e3-ecd2eac63d67.png">


### console.table
```javascript
const people = [
    { id: 1, name: 'Hiroshi', age: 40 },
    { id: 2, name: 'Tomozo', age: 76 },
    { id: 3, name: 'Momoko', age: 9 }
];

console.table(people);
```
テーブル形式で出力
<img width="602" alt="Screen Shot 2019-10-24 at 10.21.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/f0d58c1f-32ed-9639-459e-01f3be2cfb56.png">


### console.group
```javascript
function personData(person) {
    console.group('person');
    console.log(`name: ${person.name}`);
    console.log(`age: ${person.age}`);
    console.groupEnd();
}

const person = {name: 'Hiroshi', age: 40};
personData(person);
```
ログ出力を見やすく出来る。
<img width="227" alt="Screen Shot 2019-10-24 at 10.22.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/997d16a5-d527-69b5-d1fb-e1619014cf91.png">


## Consoleタブ
Elementsタブで選択しているDOMエレメントを出力
現在選択しているものは\$0で表示出来る。
\$1〜$4まで履歴が見れる。
<img width="442" alt="Screen Shot 2019-10-24 at 10.27.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/6175302a-d3ca-de64-6cbb-2d4d24034558.png">

## Consoleタブでのエレメントの取得
\$('selector')   =  document.querySelector('selector')
\$$('selector')  =  document.querySelectorAll('selector')
<img width="235" alt="Screen Shot 2019-10-24 at 10.28.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/c4e35ba2-a621-a634-ee93-4e70e261b174.png">


## console.trace
関数がどこから呼ばれているかをトレース出来る。

```javascript
function first() {
    console.log('first');
    console.trace();
}

function second() {
    console.log('second');
    first();
}

function third() {
    console.log('third');
    second();
}

third();
```
<img width="198" alt="Screen Shot 2019-10-24 at 10.32.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/0ec97ebb-16b7-7c31-6552-dc065cb80f45.png">


## console.dir
```javascript
const el = document.querySelector('div');
console.log(el)
console.dir(el);
```
エレメントのプロパティが全部表示される。
プロパティの書き換え可能
<img width="389" alt="Screen Shot 2019-10-24 at 10.35.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/13ba2730-7307-70a3-e1e7-362dbb04bf2a.png">


Node.js環境だとネストしたオブジェクトが内部まで表示可能。

```javascript
const obj = {
    a: {
        b: {
            c: {
                d: {
                    e: {
                        f: { 
                            value: 1,
                            msg: 'Hello, world!'
                        }
                    }
                }
            }
        }
    }
}

console.log(obj);
console.dir(obj, { depth: null });
```
<img width="418" alt="Screen Shot 2019-10-24 at 10.37.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469184/9889e596-58c9-7a88-0c28-9e21543d0393.png">


## 参考
[Essential JavaScript debugging tools for the modern detective by Rebecca Hill | JSConf Budapest 2019](https://www.youtube.com/watch?v=TtsvMRxmfGA&feature=youtu.be)