members

members

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

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ユニット所属。
北海道出身 趣味は野球観戦 千葉ロッテマリーンズファン。

Web担当者向け資料

初めてWeb運用担当になった時に知っておきたい超基礎知識

初めてWeb運用担当になった時に知っておきたい超基礎知識

初めて企業のWeb運用担当者になった方がディレクションをする際に知っておきたい基礎的な知識「URL、IPアドレス・DNS、Webサイト・ページの仕組み」をご紹介します。

資料ダウンロード

RFP(提案依頼書)の書き方(デジタルマーケティング担当者向け)

RFP(提案依頼書)の書き方(デジタルマーケティング担当者向け)

Webリニューアル、プロモーション、ソーシャルメディア運用などデジタル施策も多様化・高度化・多層化しています。これだ!という提案書を入手するために必要な考え方や、好まれるRFPの構成、プラス・アルファの提案をしたくなるRFPとは何かをご紹介します。

資料ダウンロード

UXデザイン基礎入門

UXデザイン基礎入門

UXデザインとは何か?なぜ、これだけ使われるようになったのか?デジタルマーケティングでのUXデザインの基礎と実践方法をご説明した資料です。

資料ダウンロード