Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@aqril_1132

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

More than 1 year has passed since last update.

誰でもカンタン。
ライブラリやタグマネの存在確認、ページ内データ抽出などに使える時短スニペット。
Chrome DevToolsから調査したいことをすぐに調べるための時短スニペットコレクション。

おすすめ使用方法

  • Chrome DevToolsのConsole機能からサクッと使う
  • Chrome DevToolsのSourceタブのSnipets機能に保存して楽々呼び出し
  • Chrome DevToolsのSourcesタブのWatch機能で常に監視

Chrome DevToolsのConsole機能の呼び出し方・基本の使い方

以下記事にて解説。
https://qiita.com/aqril_1132/items/a0f7e81a772006847ec3

スニペット

汎用

ページからaタグで貼られているリンクを一覧表示

ちょっとExcelに抜き出したいときに便利。

Array.from(document.querySelectorAll('a'),a=>a.href).filter((x, i, self) => self.indexOf(x) === i).sort();

実行結果
image.png

ページからaタグで貼られている外部リンクを一覧表示

同じくちょっとExcelに抜き出したいときに便利。

Array.from(document.querySelectorAll('a'),a=>a.href).filter((x, i, self) => self.indexOf(x) === i && x.indexOf(location.origin)).sort();

実行結果
image.png

ページ内のチェックボックスにすべてチェック

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

Array.prototype.forEach.call(document.querySelectorAll('input[type="checkbox"]'),e=>{e.checked = true;console.log(e)});

実行結果
チェックが入った要素が一覧で表示される
image.png

グローバル変数を一覧で確認する

欲しいグローバル変数が見つからないときに便利。Consoleからしか動かない。

(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
元:JSでグローバル汚染してる変数一覧を取得する - Qiita

URLパラメータを一覧表示

URLパラメータがゴチャゴチャしてて見づらいときに

Array.from(new URLSearchParams(location.search.slice(1)));

実行結果
image.png

HTTPリファラ情報を調べる

今のページにどのページから移動してきたかを示す情報。metaタグやHTTP ヘッダで上書きされたり、ブラウザによって消されたりすることもある。

document.referrer;

実行結果
image.png

黒丸で表示されているパスワードの中身を取得

ブラウザに保存されている自動入力されたパスワードの中身を簡単に確認&コピペ
Chromeの設定画面から確認するのが面倒なときに

Array.from(document.querySelectorAll("input[type='password']"), e => e.value);

実行結果
image.png

ページ内Cookie表示

Applicationタブの方から調べた方が良いことは知っている。。。

document.cookie.split(';').map(v => v.split('=').map(v => v.trim()));

実行結果
image.png

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

document.cookie.split(';').map(v => v.split('=').map(v => v.trim())).filter(v => v[0]==="insertCookieNameHere");

実行結果
image.png

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

jQueryのバージョン確認

jQuery.fn.jquery;
// "2.1.4"

Prototype.jsのバージョン確認

jQueryとの衝突が疑われるときに以下のコードを実行してPrototype.jsの存在を確認。

Prototype.Version;
// "1.5.0_rc0"

Angular.jsのバージョン確認

angular.version.full;
// "1.7.5"

Vue.jsのバージョン確認

Vue.version;
// "2.5.21"

タグマネジメント系

GoogleタグマネージャコンテナID確認

WebページにどこのGoogleタグマネージャアカウントのタグが入っているのか、そもそもGoogleタグマネージャーのタグがWebページに入っているのか調査するときに使用。

Object.keys(google_tag_manager).filter((key) => !key.indexOf('GTM-'));

実行結果
image.png

dataLayerの内容確認

dataLayer;

目的のGoogleタグマネージャアカウントのタグが動作しているか確認

insertYourGtmIdHereの部分に調査したいGTMのIDをGTM-NT3DJCKのような形で入力する。trueが返ってくれば目的のGTMが入っている。falseであれば目的のGTM以外のGTMが入っている。エラーならGTM自体が入っていない。

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

実行結果
image.png

Yahoo!タグマネージャーのsite ID確認

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


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

BrightTag.instance.site;

実行結果
image.png

あとがき

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

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
aqril_1132
時短のために時間を惜しまず、結果として作業時間が伸びる残念な人。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?