Help us understand the problem. What is going on with this article?

共通jsの発火位置を秒で特定する

はじめに

.js-accordionとクラス名に当てるとアコーディオンになるみたいな、
良く使われるjs処理がどこで記述されてるかを一瞬で見つける方法です。

結論を先に書くと
Networkタブで検索かけたら一瞬で見つかりました!

使い所

サイト全体で共通のjsファイルなんかを読み込んでおいて、
その中で良く使われるアコーディオンなり、アンカーリンクなりの処理を書いておいて、どこでも呼び出せるようにみたいなことって良くあるかと思います。

ただ、ある程度長く運用を続けているサイトになってくると、
共通で読み込んでるjsファイルが数が増えてきちゃって

  • base.js
  • share.js
  • utilty.js

みたいな後から入った人からするとどこに何が書かれてるか分かんない状況になっちゃうんですよね。
で、アコーディオンの挙動に問題があった場合とかまず調査するためにその処理がどこに書かれてるか探すところから始めるかと思いますが、これを僕は検証機能の「source」タブを使って読み込まれたjsファイルを一つ一つ開いて「.js-accordion」で検索かけたりして探してたんですよね。

これを「Network」タブの方でCtrl+fしたら左側にこんな検索メニューでてくるんですよ。
スクリーンショット 2020-07-01 8.35.18.png
ここで「.js-accordion」とかって検索すると、
それが書かれてるファイルと行数がパッと出てくるんでそれで解決です。

誤操作でたまたまこの探し方発見したんですけど感動しました。

_pipo_
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした