コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

さふぁる

本日のさふぁり

はい。おはようございます。僕です。今日も意味もなくMacはいいぞとかそういうのをやったりやらなかったりしていこうかと思います。やはりMacユーザ*1たるものブラウザはSafariを使うのが礼儀だと思うのです。なのでSafari使ってなんか色々できるよ的なことをみていくなどをやっていきたいと思います。まあ、開発ツール周りをみていくだけです。

f:id:andron:20200209175334p:plain

f:id:andron:20200206092157p:plainf:id:andron:20200206092213p:plain
Safariを開いて上の開発タブからWebインスペクタを選択するとよくある開発ツールを確認できるようになります。

・要素
要素の確認ができます。HTMLの構成がどうなっているのか確認したいときに便利。この画面から特定の範囲をキャプチャすることもできます。

f:id:andron:20200209175820p:plain


・ネットワーク
読み込み時のリソースサイズや時間が確認できます。どこのファイルが遅くなる要素になっているのか確認するのに便利。


・デバッガ
コンソールのエラー表示がより見やすくなったような感じのやつ。ソースも一緒に眺めることできるのソースコードを俯瞰して確認したいときに便利。


・リソース
読み込み時のリソース一覧を確認できます。サイト内の画像とか抜き出すのに便利。


・タイムライン
ネットワーク・レンダリング・CPUなどの処理時間がわかりやすく表示されます。描画周りの部分まで確認するのに便利。


・ストレージ
Cookieやセッションストレージの中身を確認するのに便利。


Canvas
Canvas要素を抜き出します。Canvas要素の確認に便利。


・監査
Webページ最適化のためにやっておくといいことを検証してくます。便利。


・コンソール
よくあるコンソール画面。ちょっとした計算とかそういうのやるのに便利。


と言った感じのやつが開発ツールにあるのでみんなもSafari使っていこう!Choromeにも似たようなの普通にあるから別にみる必要はなかったりするけども便利だから使おう。ただCanvas確認するやつってなかったような気がした。


おわり。

*1:普段はWindowsユーザであったりUbuntuユーザだったりしますが細かいことは気にしてはいけない