chrome devtools tip(2)--コードクリップをカスタマイズし、ツールボックスを構築

通常の開発では、urlパラメータを取得したり、rgbを16進数に変換したり、現在のページのパフォーマンスデータを印刷したり、すべてのspanにスタイルを追加したり、ブレ防止、fetchインタフェース、jqueryのようなdomノードを簡単に選択できるライブラリなど、私たちが普段使っているutilsツールコードがたくさんあります.
多くの人は使うたびにgoogleの下に行って、今度使ってまた探しに行って、このように毎回探して、繰り返してまた時間を遅らせて、どのようにこれらのコードをブラウザのある場所に保存することができて、使う時直接取り出して使うことができて、それでは今日chrome devtoolsのsnippetsの機能について話します
上のGIFが表示されるように、sourcesパネルの下にsnippetsオプションがあり、左側に必要なディレクトリを作成し、コードを書き始めるといいです.
コードが書き終わって、右下の足はCtrl+Enterのボタンを表示することがあって、運行をクリックして、あるいはショートカットのボタンを使って、コードを運行することができて、とても便利ではありませんか
ここのコードは保存して、次回ブラウザを開けて、コードはやはり存在して、このようにここはあなたが各種のツールのコードを保存する良い場所になることができます
例えば、今見たいのは、現在のサイトの性能です.もしあなたがここに性能データを取得するコードを保存しているとしたら、すぐに取得できます.私自身が保存しています.
ここはgithubを見て、良い考えがあるときに、セグメントコードを書いてみるのに良い場所になります.エディタを開かなくても、F 12を開けて仕事を始めることができます.便利で簡単です.consoleパネルでコードを書くのは鶏の肋骨です.改行して実行します.とても不便です.これは便利です.
こんな使いやすい机能がキュンキュンしないのか、早速chromeを开けてみよう
おすすめ読書:devtools tips:擬似クラスdevtools tipsをデバッグする:コードクリップの保存を実行するWebpack生誕記Babel学習シリーズ4-polyfillとtransform-runtimeの違い
もしあなたが好きなら私の公衆番号「chromedev」に注目して、chromeに関する情報に集中することができます.