シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita

開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で

[endok]

思ったより便利そうなの多かった

[yigarashi]

まだまだ知らない便利機能がたくさんあった

[take-it]

老眼入ってきてるので、DevTools上のフォントサイズを大きくできるのかと少しだけ期待しちゃったよ。「シニア」フロントエンジニアだけに。

[danhox]

スクリーンショットうまくいかないページたまにあるけどなんでなのあれ

[dmp939]

“Screenshot Capture full size screenshot”そういうのもあるのか

[kasuke18]

“NetworkパネルのCapture Screenshotsを使って、ページ読み込み中のスクリーンショットをキャプチャできます。”

[iga_k]

ページのフルスクリーンショットとかXHRの再生とか知らない機能いろいろあった

[fjwr38]

XHR もっかい投げられるの知らんやった

[yuzuk45]

知らない事多いなー

[yosshi1202]

便利機能まだまだある

[m_ogawa]

これは便利。

[quality1]

使いこなしてたらかっこいい

[kutsu_shita]

シニア

[onody_onody]

スクリーンショットをプラグイン無しできれいに取れるの知らんかった

[fuyu77]

へぇー、知らない機能がいっぱいだ。

[tkmkg8m]

table 関数知らなかった。オブジェクトの配列みたいなデータを table(users) とかすると表形式で表示してくれる。便利やん。

[ikkitang1211]

知らない機能いっぱいあるなー。

[xjack]

右クリック禁止設定がされているページの画像や，背景として表示されていて右クリック＆別タブで開くオプションが使えない画像を保存するときによく使う．え，エロ画像じゃないぞ．．

[uesugi_sbw]

firefoxみたいに選択している要素だけのスクリーンショット撮れるようにしてほしい

[otochanpngn]

最近フロント触り始めたからためになる。

[phoope]

色々できるだな。 ここで忘れても大雑把に脳が記憶しといてくれるだろう。

[shinjukukumin]

“7. オブジェクトの配列を表形式にする。” これはいいかも。

[akulog]

素晴らしい

[netcraft3]

知らないことが沢山あって勉強になった

[Rinta]

勉強になる！

[cielonlon]

来週あたりからたぶんコレ必要になる

[Helfard]

勉強になるなあ。

[shag]

selenium から行うことが多いのですが、screenshot は便利だよね。

[baronhorse]

タダ乗りおじさんみたいに？

[stealthinu]

Chromeのデベロッパーツール、思ってたよりもいろんな知らない機能があった。「$_」が特別な変数として使えるのはperl文化からきてるのかな？

[repon]

1個も知らなかった……

[tomono-blog]

devtools