秒で使える業務時短コード集 - ChromeDevTool活用

誰でもカンタン。
ライブラリやタグマネの存在確認、ページ内データ抽出などに使える時短スニペット。
[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/?hl=ja)から調査したいことをすぐに調べるための時短スニペットコレクション。

## おすすめ使用方法
- Chrome DevToolsの[Console機能](https://developers.google.com/web/tools/chrome-devtools/console/?hl=ja)からサクッと使う
- Chrome DevToolsのSourceタブの[Snipets機能](https://developers.google.com/web/tools/chrome-devtools/snippets?hl=ja)に保存して楽々呼び出し
- Chrome DevToolsのSourcesタブの[Watch機能](https://developers.google.com/web/tools/chrome-devtools/javascript/watch-variables?hl=ja)で常に監視

### Chrome DevToolsのConsole機能の呼び出し方・基本の使い方
以下記事にて解説。
→ https://qiita.com/aqril_1132/items/a0f7e81a772006847ec3

## スニペット

### 汎用
#### ページからaタグで貼られているリンクを一覧表示
ちょっとExcelに抜き出したいときに便利。

```js:
Array.from(document.querySelectorAll('a'),a=>a.href).filter((x, i, self) => self.indexOf(x) === i).sort();
```
**実行結果**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/6fce313d-4157-612c-927f-1349a29cc548.png)

#### ページからaタグで貼られている外部リンクを一覧表示
同じくちょっとExcelに抜き出したいときに便利。

```js:
Array.from(document.querySelectorAll('a'),a=>a.href).filter((x, i, self) => self.indexOf(x) === i && x.indexOf(location.origin)).sort();
```
**実行結果**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/365b0d11-8be9-4dc6-5599-0f01c913e3c1.png)

#### ページ内のチェックボックスにすべてチェック
ポチポチひたすら押していかないといけないときに。見えていないチェックボックスにチェックが入ってしまい、思わぬ事故に繋がることもあるかも知れないので注意。

```js:
Array.prototype.forEach.call(document.querySelectorAll('input[type="checkbox"]'),e=>{e.checked = true;console.log(e)});
```
**実行結果**
チェックが入った要素が一覧で表示される
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/fd179455-8566-0614-a1ff-97a1ae5c0408.png)

#### グローバル変数を一覧で確認する
欲しいグローバル変数が見つからないときに便利。Consoleからしか動かない。

```js:
(function () {var propsOrig = [],propsGlobal = {},win = window.open();for (var i in win) {propsOrig.push(i);}win.close();for(var i in window){if (!propsOrig.includes(i)) {propsGlobal[i] = window[i]}}return propsGlobal;})();
```
**実行結果**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/52cb79df-cde3-a032-16e8-5dd39abef1fb.png)
元：[JSでグローバル汚染してる変数一覧を取得する - Qiita](https://qiita.com/nabepon/items/cd6086bb4ecd6d8ce812)

#### URLパラメータを一覧表示
URLパラメータがゴチャゴチャしてて見づらいときに

```js:
Array.from(new URLSearchParams(location.search.slice(1)));
```
**実行結果**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/2097f634-73eb-e3dc-adb1-9f340b20242a.png)

#### HTTPリファラ情報を調べる
今のページにどのページから移動してきたかを示す情報。[metaタグやHTTP ヘッダで上書き](https://qiita.com/wakaba@github/items/707d72f97f2862cd8000)されたり、ブラウザによって消されたりすることもある。

```js:
document.referrer;
```
**実行結果**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/3157e183-b45a-ba39-5a6c-08fddcb82b40.png)

##### Page URL Pathから特定の階層の文字列を抽出
TARGET_LEVELの数字を変更して取得したい階層を変更
```js:
(function(){
  var TARGET_LEVEL = 1;
  var pagePathArray = location.pathname.slice(1).split('/');
  var pathLevel = TARGET_LEVEL - 1;
  if (pagePathArray.length > pathLevel) {
    var result = pagePathArray[pathLevel];
    return result;
  }
  return undefined;
})();
```
#### 黒丸で表示されているパスワードの中身を取得
ブラウザに保存されている自動入力されたパスワードの中身を簡単に確認&コピペ
[Chromeの設定画面から確認](https://support.google.com/chrome/answer/95606)するのが面倒なときに

```js:
Array.from(document.querySelectorAll("input[type='password']"), e => e.value);
```
**実行結果**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/76bb5003-60d1-57bf-f968-8c8394543829.png)


#### ページ内[Cookie](https://qiita.com/hththt/items/07136ad74127999df271)表示
[Applicationタブの方から調べた方が良い](https://developers.google.com/web/tools/chrome-devtools/manage-data/cookies?hl=ja)ことは知っている。。。

```js:
document.cookie.split(';').map(v => v.split('=').map(v => v.trim()));
```
**実行結果**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/cee59cfe-a737-bd27-0831-4a42fdf46b1d.png)

もう欲しいCookieが決まっているときは以下のコードの`insertCookieNameHere`を目的のCookie名に置換えて使用する。

```js:
document.cookie.split(';').map(v => v.split('=').map(v => v.trim())).filter(v => v[0]==="insertCookieNameHere");
```
**実行結果**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/b4fdd047-29de-01f8-6d2c-b98d0e2b6cf3.png)

### 読み込まれているライブラリの有無・バージョン確認

#### [jQuery](https://jquery.com/)のバージョン確認
```js:
jQuery.fn.jquery;
// "2.1.4"
```

#### [Prototype.js](http://prototypejs.org/)のバージョン確認
jQueryとの衝突が疑われるときに以下のコードを実行してPrototype.jsの存在を確認。

```js:
Prototype.Version;
// "1.5.0_rc0"
```

#### [Angular.js](https://angularjs.org/)のバージョン確認
```js:
angular.version.full;
// "1.7.5"
```

#### [Vue.js](https://jp.vuejs.org/index.html)のバージョン確認
```js:
Vue.version;
// "2.5.21"
```

### Google Analytics　(Universal Analytics)
#### ページ内で稼働中のGoogleアナリティクスのトラッキングIDなど取得
fields変数に[フィールドリファレンス](https://developers.google.cn/analytics/devguides/collection/analyticsjs/field-reference?hl=ja)のフィールド名を登録することで必要な情報を簡易確認。
##### Console版

```js:
ga.getAll().forEach(function(tracker){
  let fields = ['trackingId','clientId','cookieName','allowLinker','allowAdFeatures'];
  console.group();
  fields.forEach(field => console.log(field,tracker.get(field)));
  console.groupEnd();
});
```

**実行結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/872f15e1-4004-95e9-bc8e-b211bb14125c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/5eb2338c-23f1-ef1e-9c71-bb7995bd128d.png)

##### Sourceタブ用

```js
(function(){
  let results = [];
  ga.getAll().forEach(function(tracker){
    let fields = ['trackingId'];
    let result = {};
    fields.forEach(field => result[field] = tracker.get(field));
    results.push(result);
  });
  return results;
})();
```

**実行結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/f9f23a97-3e36-eec1-848b-8dc68ac98611.png)


### タグマネジメント系
#### [Googleタグマネージャ](https://marketingplatform.google.com/intl/ja_ALL/about/tag-manager/)の[コンテナID](https://support.google.com/tagmanager/answer/6103696?hl=ja)確認
WebページにどこのGoogleタグマネージャアカウントのタグが入っているのか、そもそもGoogleタグマネージャーのタグがWebページに入っているのか調査するときに使用。Google Optimizeなど`GTM-`から始まるアカウントIDを採用しているGTM以外のGoogleプロダクトもあるため、出てきたIDがGTMのものとは限らない。

```js:
Object.keys(google_tag_manager).filter((key) => !key.indexOf('GTM-'));
```
**実行結果**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/4d017170-c09d-fe70-74c8-00db413ebf44.png)


#### 目的のGoogleタグマネージャアカウントのタグが動作しているか確認
`insertYourGtmIdHere`の部分に調査したいGTMのIDを`GTM-NT3DJCK`のような形で入力する。`true`が返ってくれば目的のGTMが入っている。`false`であれば目的のGTM以外のGTMが入っている。エラーならGTM自体が入っていない。

```js:
!!~Object.keys(google_tag_manager).filter((key) => !key.indexOf('GTM-')).indexOf('insertYourGtmIdHere');
```

**実行結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/bee8e143-7be2-1ee0-dad7-77641d251c34.png)

#### GA4タグを設置方法別に確認
[春山さん](https://twitter.com/649Ga4) 作
ページ内に設定されているGoogleタグの測定IDを読み込み元（GTMコンテナ経由、gtagによる設定）ごとに一覧で確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/c9293fc6-47a3-3fcc-5101-3284d2d3e7ad.png)

```js:
(() => { let d = google_tag_data.tidr.container, r = { "gtag": [] }; for (let k in d) { if (k.startsWith("G-")) { let p = d[k].parent; p && p.ctid ? (r[p.ctid] = r[p.ctid] || []).push(k) : r["gtag"].push(k); } } return Object.entries(r).map(([k, v]) => `${k} [${v.join(', ')}]`).join(' & '); })()
```

**実行結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/280a3b31-f640-8e23-17ba-94cc6999eb9f.png)


#### [dataLayer](https://support.google.com/tagmanager/answer/6164391?hl=ja)の内容確認
```js:
dataLayer;
```

#### dataLayer.pushにより構築されたdataModelの状態をConsoleから確認
GTMがdataLayer変数を取得するために参照しているのは実はdataLayerの配列ではなくこちらのdataModelオブジェクト。`GTM-XXXXXX` の部分を目的のGTM IDに書き換えて使用。ちなみにGTMプレビューモードのData Layerのタブからも確認可能。
```js:
window.google_tag_manager['GTM-XXXXXX'].dataLayer.get({split: function(){return [];}});
```

#### GTMでdataLayer変数として取得されている値をConsoleから取得
`GTM-XXXXXX` の部分を目的のGTM IDに書き換え＆ `insertYourGtmDataLayerVariableNameHere` を欲しいデータレイヤー変数のキー名に書き換えて使用。
```js:
window.google_tag_manager['GTM-XXXXXX'].dataLayer.get('insertYourGtmDataLayerVariableNameHere');
```

#### Yahoo!タグマネージャーのsite ID確認
WebページにどこのYahooタグマネージャーアカウントから発行された「Yahoo! JAPANユニバーサルタグ」が入っているのか、そもそもYahooタグマネージャーアカウントのタグがWebページに入っているのか調査するときに使用。

<details>
<summary>siteIDとは？</summary>
Yahooタグマネージャーのアカウントごとにユニークな文字列の組み合わせ。
この値を見ることで、Webサイトに設定されているYahooタグマネージャーがどのアカウントから発行されたタグか確認することができる。
Yahooタグマネージャーの管理画面のURLにも以下の文字列の黒丸の部分にsiteIDが入っている。
https://control.theyjtag.jp/sites/●●●●/
Yahooプロモーション広告の管理画面にログインした後、そのサイトに設置されているsiteIDを上記のURLに埋め込んで開いてみることで直接該当のYahooタグマネージャーの管理画面にジャンプすることができる。
勿論ログインしていないYahooプロモーション広告アカウントに紐づくYahooタグマネージャーの管理画面には入ることが出来ないので、設定されているYahooタグマネージャーが自社管理のものかどうか簡易確認することもできる。

</details>

```js:
BrightTag.instance.site;
```
**実行結果**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/06210da0-6985-3c15-18be-a43bf9ba2b67.png)

#### その他
##### Core Web Vitals
https://qiita.com/aqril_1132/items/ea4c8d7f32cb71787c8a



## あとがき
基本無精なので、こういうスニペットを使って業務のちょっとした時間を短縮してます。
便利そうなスニペットがあれば後から増やしていく予定です。