Chrome DevToolsのSnippets機能がすごい便利そう

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] を読んで知ったのですが、ChromeのDevTools(開発者ツール)にはSnippetsという、コンソールでデバッグの際に使うスクリプトを保持してくれる機能があるようです。普段、よく使う機能でもConsoleパネルで打ち込んだりコピペしたりしてて面倒だなと思ってたのでこれは便利出す。早く知りたかったです・・・。

とりあえず、jQueryが読み込まれていないサイトでもjQueryが動くようにSnippetsに登録してみます。

ChromeのDev Toolsを開き(Ctrl+Shift+IかF12キーを押す)、Sourcesパネルを開いてその中のSnippetsタブをクリック。その後、左側の空白欄を右クリックしてメニューを表示し、その中の『New』をクリック。
snippets2

そうすると新しいsnippetが追加され、真ん中にコード記入欄ができるのでsnippetの名前を『jqueryfy』、コード下記のように記入し保存。

『フロントエンドエンジニア養成講座』に記載してあったコードには『else if』の内容は記載してありません。ただ、なぜかここのブログではjQueryはあるのに$がないといわれてしまうため、仕方なくelse ifを追加しています。

とりあえず、保存したsnippetを実行してみます。jqueryfyの箇所を右クリックしてメニューを表示し、『Run』をクリックするだけ。以下の画像は、当ブログで実行してみた結果です。
snippets3
当ブログの場合は、実行するとコンソール画面に『’$’ is jQuery 』と表示されます。通常のjQueryがないサイトでは『jQuery loaded! 』と表示されると思います(すでに、jQueryが動いているサイトでは実行されません)。

この他にも、下記ページに登録しておくと便利なスニペットがまとめてあります。
DevTools Snippets
思った以上に汎用性がありそうです。

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)
フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

コメントを残す

メールアドレスが公開されることはありません。