Light TALK Plus＋ vol.12「デベロッパーツールの意外と知らないそうな機能」
こんちはLight Webのアルバイト君です。
着工から100年以上経過しても今なお建設中という、世界遺産「サグラダ・ファミリア」。
しかし、日本にも100年以上建設し続け、現在も工事中の場所を知っていますか？
答えは「新宿」です。
開業から134年間が経った現在でも工事中といういわいる「日本のサクラダ・ファミリア」で建設年数は本家の「サクラダ・ファミリア」を超えることはほぼ確実です。
工事が終わらない理由に想定する人口が予測できていないことが挙げられます。成長し続ける新宿に対して駅も形を変え続けていかなければならず、工事が終わりをむかえることはなさそうです。
「Light TALK Plus＋」とは…
アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマは「デベロッパーツールの意外と知らないそうな機能」です！
テーマ
普段、使っているデベロッパーツール。テキストエディタは背景が黒色で文字がみやすいけれど、デベロッパーツールは背景が白で見ずらい。
- デベロッパーツールを起動
- 右上の3つの点をクリックして、「Settings(F1)」を選択
- 「Preferences」の「Theme」を「Light」から「Dark」に切り替え
白い背景から黒い背景へとテーマが変更されました。
タブの切り替え
デベロッパーツールは一画面上で表示されるのでサイト表示や、デベロッパーツールの表示が小さくて見ずらい。
- デベロッパーツールを起動
- 右上の3つの点をクリックして、「Dock Side」の左端のアイコンを選択
デベロッパーツールが別タブで表示されました。
デバイス
デベロッパーツールで表示できるデバイスの数は右図のとおり。
しかし、デバイスの数はこれ以上。
- 「Responsive」の一番下にある「Edit」を選択
- 使用したいモバイルにチェックを入れると反映
- 「Add custom device」は自分の好みの幅や高さをしてすることができる
キャッシュ
普段、ページを更新する際に使っている更新ボタンの隠れた機能
- デベロッパーツールを起動
- 更新ボタンを長押し
- 読み込みの種類を選択できる
キャプチャー
LPのような長いホームページの一画面をスクショや切り抜きで撮ろうとすると、大変な労力が生じてしまう。
- デベロッパーツールを起動
- 右上の3つの点をクリックして、「Run command」を選択
- コマンド入力欄が出てくるので「full」を記入すると「Capture full size screenshot」を選択
LPのような長いページのサイトでも一枚画像で書き出せました。
皆さんは、いくつ知らない機能がありましたか？
Light Webからのお知らせ
ライトウェブはプライバシーマークを取得しました！
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します！
