<p><img src="https://storage.googleapis.com/zenn-user-upload/3a04000f55280522a49ce5c0.png" alt loading="lazy" class="md-img"></p>
<h4 id="chrome-devtools-%E3%82%92%E9%96%8B%E3%81%84%E3%81%9F%E7%8A%B6%E6%85%8B%E3%81%A7%E3%80%81-command(%E2%8C%98)-%2B-shift(%E2%87%A7)-%2B-p%E3%82%92%E6%8A%BC%E3%81%99%E3%80%82">
<a class="header-anchor-link" href="#chrome-devtools-%E3%82%92%E9%96%8B%E3%81%84%E3%81%9F%E7%8A%B6%E6%85%8B%E3%81%A7%E3%80%81-command(%E2%8C%98)-%2B-shift(%E2%87%A7)-%2B-p%E3%82%92%E6%8A%BC%E3%81%99%E3%80%82" aria-hidden="true"></a> Chrome DevTools を開いた状態で、 <code>command(⌘) + shift(⇧) + P</code>を押す。</h4>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1a69503e3433387357c5a78a.png" alt loading="lazy" class="md-img"></p>
<h4 id="%E3%81%99%E3%82%8B%E3%81%A8%E3%80%81%E3%81%93%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E6%A4%9C%E7%B4%A2%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%8C%E5%87%BA%E7%8F%BE%E3%80%82">
<a class="header-anchor-link" href="#%E3%81%99%E3%82%8B%E3%81%A8%E3%80%81%E3%81%93%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E6%A4%9C%E7%B4%A2%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%8C%E5%87%BA%E7%8F%BE%E3%80%82" aria-hidden="true"></a> すると、このような検索フォームが出現。</h4>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>Visual Studio Code の Code Pallete(↓) からインスピレーションを受けたそう。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/83b9e983346026c27063816f.png" alt loading="lazy" class="md-img"></p>
</div></aside>
<h2 id="60%E7%A8%AE%E9%A1%9E%E4%BB%A5%E4%B8%8A%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89">
<a class="header-anchor-link" href="#60%E7%A8%AE%E9%A1%9E%E4%BB%A5%E4%B8%8A%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89" aria-hidden="true"></a> 60種類以上のコマンド</h2>
<h3 id="%E4%BE%8B%E3%81%88%E3%81%B0%E3%80%81%E3%80%81%E3%80%81">
<a class="header-anchor-link" href="#%E4%BE%8B%E3%81%88%E3%81%B0%E3%80%81%E3%80%81%E3%80%81" aria-hidden="true"></a> 例えば、、、</h3>
<h4 id="%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7">
<a class="header-anchor-link" href="#%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7" aria-hidden="true"></a> スクショ</h4>
<p><img src="https://storage.googleapis.com/zenn-user-upload/5072c611c4712469b6474d77.png" alt loading="lazy" class="md-img"></p>
<h4 id="%E3%83%87%E3%83%90%E3%83%83%E3%82%B0">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0" aria-hidden="true"></a> デバッグ</h4>
<p><img src="https://storage.googleapis.com/zenn-user-upload/c09cac93891105c2de5d7a17.png" alt loading="lazy" class="md-img"></p>
<h1 id="%E3%81%8A%E3%81%BE%E3%81%91">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91" aria-hidden="true"></a> おまけ</h1>
<h4 id="%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E6%96%87%E5%AD%97%E5%88%97%E6%A4%9C%E7%B4%A2%E3%81%97%E3%81%A6%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E4%BB%A5%E5%A4%96%E3%81%AB%E3%82%82%E8%89%B2%E3%80%85%E3%81%AA%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E6%96%87%E5%AD%97%E5%88%97%E6%A4%9C%E7%B4%A2%E3%81%97%E3%81%A6%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E4%BB%A5%E5%A4%96%E3%81%AB%E3%82%82%E8%89%B2%E3%80%85%E3%81%AA%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82" aria-hidden="true"></a> コマンドを文字列検索して実行する以外にも色々なことができる。</h4>
<p><img src="https://storage.googleapis.com/zenn-user-upload/163ab6249542dc5cf624a07a.png" alt loading="lazy" class="md-img"></p>
<h4 id="%E6%98%AF%E9%9D%9E%E3%81%8A%E8%A9%A6%E3%81%97%E3%81%82%E3%82%8C%E3%80%82">
<a class="header-anchor-link" href="#%E6%98%AF%E9%9D%9E%E3%81%8A%E8%A9%A6%E3%81%97%E3%81%82%E3%82%8C%E3%80%82" aria-hidden="true"></a> 是非お試しあれ。</h4>
<h3 id="references">
<a class="header-anchor-link" href="#references" aria-hidden="true"></a> References</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3e7876099f8f7" src="https://embed.zenn.studio/card#zenn-embedded__3e7876099f8f7" data-content="https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2016%2F04%2Fdevtools-digest-command-menu" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developers.google.com/web/updates/2016/04/devtools-digest-command-menu" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developers.google.com/web/updates/2016/04/devtools-digest-command-menu</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6cefa62f6facc" src="https://embed.zenn.studio/card#zenn-embedded__6cefa62f6facc" data-content="https%3A%2F%2Fdeveloper.chrome.com%2Fdocs%2Fdevtools%2Fcommand-menu%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.chrome.com/docs/devtools/command-menu/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/docs/devtools/command-menu/</a></p>


[秒読みTip] ⌘ + ⇧ + P でコマンド検索

Chrome DevTools を開いた状態で、 `command(⌘) + shift(⇧) + P`を押す。

すると、このような検索フォームが出現。

60種類以上のコマンド

例えば、、、

スクショ

デバッグ

おまけ

コマンドを文字列検索して実行する以外にも色々なことができる。

是非お試しあれ。

References

Discussion

Chrome DevTools を開いた状態で、 command(⌘) + shift(⇧) + Pを押す。