members

members

Webクリエイター必見!GoogleChromeアップデート内容解説!

Tweet

はじめまして、2018年に新卒として入社しました、メンバーズの左高と申します。
先日、GoogleChromeのアップデートがあったのですが、Webクリエイターが知っておくと便利な情報が満載だったので紹介致します。

タイトル画像

便利ポイント1つ目 デバッグ作業が簡単になる!

JavaScriptのデバッグをする際にconsole.log(); を打ち込みブレークポイントを仕掛けていたと思いますが、
JavaScriptに手を加えることなく検証モード上のみでデバッグが出来るようになりました。

主な概要

新しい機能として「ログポイント」が追加されました。
ログポイントを使用すると、console.log() を呼び出してコードを乱雑にすることなく検証が出来ます。

ログポイントを使用するには?

1.ログポイントを追加したい行番号を右クリックします。

※1 出典:Google「What’s New In DevTools (Chrome 73)」

2.コンソールで検証したい条件を入力します。

※1 出典:Google「What’s New In DevTools (Chrome 73)」

3.実際にページ上で操作し、その行が実行されるとConsoleに結果を出力してくれます。

※1 出典:Google「What’s New In DevTools (Chrome 73)」

コーダーだけでなく、エンジニアにも助かる機能ですね。
IEでは「console.log」がある状態だとエラーをはいてしまっていたので悩まなくてよくなりそうです!

便利ポイント2つ目 CSSの確認が容易に!

普段 HTML CSSを組んでページに反映して、カラーコードやフォントを調べるのに拡張機能を使って調べている人が多いと思います。
それが拡張機能なし、Chromeの標準機能だけで確認することが出来るようになりました。

こちらをご覧ください。

他のサイトの色が欲しい時など簡単に調べることが出来てデザイナーにもありがたい機能だと思います!

次が最後になります。

便利ポイント3つ目 Sourcesの折りたたみ機能追加!

エディタにはありましたが、検証モードでも実装されました。
折りたたまないと目が疲れてしまいますよね・・・

設定方法についてはこちらをご覧ください。

設定方法

1.「F12」を押した後「F1」を押します

2.Settings > Preferences > Sources から「Code folding」を見つける

3.プルダウンから選択する

以上です。
とても簡単ですね!

最後にChromeのアップデートの仕方をまとめます。
こちらをご覧ください。

バージョン確認方法

Webクリエイターの皆様のお役に立てましたら幸いです。
「普段何気なく使っているけど、アップデートしてないなぁ。」なんて方がいれば是非この機会にアップデートしてみてください!

コラム執筆

左高 航洋(さたか こうよう)

左高 航洋(さたか こうよう)

2018年1月入社。
第4ビジネスユニット-アカウントサービス第1ユニット所属。
北海道出身 趣味は野球観戦 千葉ロッテマリーンズファン。