Chromeのデベロッパーツールでフィルムストリップ表示する方法

Chromeのデベロッパーツールでフィルムストリップ表示する方法についてです。

Chromeのデベロッパーツールでフィルムストリップ表示を使用すると、ページのレンダリングのスクリーンショットと時間を始めから終わりまで表示することができます。

まずは、デベロッパーツールを起動し、「Network」パネルを選択します。

次に、カメラアイコンをクリックします。

最後にページをリロードします。
すると、次のようにページのレンダリングのスクリーンショットと時間を始めから終わりまでが表示されます。

無料で読める国立情報学研究所が出している情報学についての記事

国立情報学研究所が出している情報学についての記事を出していたのでメモ。
毎月出している上に無料で読めるのが大変ありがたいです。
www.nii.ac.jp

勉強にいいですね。
IT関連で働いている人や情報系の学生にはぜひ読んでもらいたいですね。

ChromeのデベロッパーツールでCSSの記述行に移動(ジャンプ)する方法

ChromeのデベロッパーツールでCSSの記述場所に移動(ジャンプ)する方法についてです。

まずは、Chromeのデベロッパーツールを開きます。
(command+option+I)

次にStylesパネルを開きます。

セレクタやプロパティや値の上で「command+クリック」します。
(Windowsでは「ctrl+クリック」です。)

すると、記述されている行までジャンプしてくれます。

覚えておくと便利な小技ですね。