Google Chrome 70正式リリース!WEB制作者が知りたい新機能まとめ

デバイス

Google Chrome 70正式リリース!WEB制作者が知りたい新機能まとめ

2018年10月20日 12:00 2018年10月24日

Google Chrome 70正式リリース!WEB制作者が知りたい新機能まとめ

こんにちは!

最近、スクラブにハマっていて、気づいたら空けていないスクラブが6個もあった社員Aです👩

日によって使い分けて消化していく予定です(笑)

さて、今回は10月16日にリリースされた「Google Chrome 70」のWEB制作者が知りたい新機能を書いていきたいと思います。

▼こちらもおすすめ



 

Chrome 70の改善点・新機能まとめ

前回の「Chrome69」では、賛否両論ありましたが、UIも含めて一新されたことが話題になりました。

▼前回の記事

この69で導入されたGoogleのサービスへのログインを、Chromeに反映する仕組みがプライバシー侵害になるのではないかとの指摘が相次ぎ、この問題を対処するなど様々な改善・新機能が搭載されていますので、詳しくまとめていきます。

 

新機能1.自動的にChromeにもログインする機能を手動に

従来のChromeは、ChromeでGmailなどにログインしても自動的にChromeにログインされるようになっていましたが、今回のバージョンから自動的にChromeにもログインする機能を手動で選択できるようになりました。

◆手動で選択する方法

  1. 「設定」から「詳細設定」をクリックする
  2. 「プライバシーとセキュリティ」のセクションに「Chromeへのログインを許可する」という項目があり、この部分をOFFにする

 

新機能2.自分のログイン状態を確認しやすくなった

Chromeの同期アカウントの「同期ステータス」を表示する新しいUIも公開されました。

ユーザーのアカウント名の上に「同期していません」または「同期しています」と表示されるので、ログイン状況や同期状況をひと目で分かるようになりました。



新機能3.HTTPS非対応Webサイトの警告をChrome 69より強化

前回の69では、HTTPS非対応のWEBサイトでは警告が表示されるようになりましたが、今回の70でさらに強化されました。

URLバー部分に「保護されていない通信」と表示されているWEBサイトでメールアドレスなどを入力しようとすると、赤いアイコンが表示されます。

 

新機能4.指紋認証

Chrome 70では、macOSの“TouchID”とAndroidの指紋センサーで、Web認証に利用できるようになりました。



 

Chrome 70 デベロッパーツールの改善点・新機能まとめ

ここからは、WEB制作者が知りたいデベロッパーツールの改善点や新機能などをまとめていきます。

 

新機能1.コンソールでのライブ表現

Create Live Expressionで、コンソールの値をリアルタイムに監視できるようになりました。値は250ミリ秒ごとに更新されます。

 

新機能2.DOMノードを強調表示する

コンソールのDOMノードに評価される式を入力し、Eager Evaluationで そのノードをビューポートにハイライト表示できるようになりました。

注意点強調表示されたノードは、入力すると更新されます。たとえば、要素をフォーカスして追跡した後、ページをタブで移動すると、DevToolsは最初に式を入力したときにアクティブだったノードを強調表示します。

また、次のような便利な表現もあります。

  1. document.activeElement 現在フォーカスを持っているノードを強調表示します。
  2. document.querySelector(s)任意のノードを強調表示するためのものsで、CSSセレクタはどこですか?これは、DOMツリー内のノード上をホバリングするのと同じです。
  3. $0 DOMツリーで現在選択されているノードを強調表示します。
  4. $0.parentElement 現在選択されているノードの親を強調表示します。


新機能3.パフォーマンスパネルの最適化

大きなページをプロファイリングするとき、以前はパフォーマンスパネルでデータの処理とビジュアル化に数十秒かかっていました。

Chrome 70では処理とビジュアライゼーションが高速です。

 

新機能4.信頼性の高いデバッグ

Chrome 70では、ブレークポイントが消えたり、トリガされなかったりするいくつかのバグが修正されています。

また、ソースマップに関連するバグも修正されています。

一部のTypeScriptユーザーは、コードをステップ実行しながらDevToolsに特定のTypeScriptファイルをブラックボックス化するよう指示し、代わりにDevToolsはバンドルされたJavaScriptファイル全体をブラックボックスにします。

これらの修正は、[ソース]パネルが一般的にゆっくり実行される原因となった問題にも対処しています。

 

新機能5.コマンドメニューからネットワークのスロットルを有効にする

コマンドメニューからネットワークのスロットリングを高速3Gまたは低速3Gに設定できるようになりました。



新機能6.オートコンプリート条件付きブレークポイント

オートコンプリートUIを使用して、条件付きブレークポイント式をより速く入力します。

 

新機能7.AudioContextイベントを中断する

ライフサイクルイベントハンドラの最初の行を一時停止するには、イベントリスナブレークポイントペインを使用します。

AudioContextはWeb Audio APIの一部です。このAPIを使用して、オーディオを処理して合成できます。

 

新機能8.ndbを使ってNode.jsをデバッグする

ndbはNode.jsアプリケーション用の新しいデバッガです。DevToolsを使用する通常のデバッグ機能に加えて、ndbには次の機能もあります。

  1. 子プロセスの検出と添付。
  2. モジュールの前にブレークポイントを配置する必要があります。
  3. DevTools UI内のファイルの編集。
  4. 既定では、現在の作業ディレクトリの外にあるすべてのスクリプトをブラックボックス化します。
注意点ndbはGoogle Chrome Labsの実験プロジェクトです。

 

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。日本語力が乏しく…社内のみんなからも指摘をされるので、ブログの執筆を通じて語彙力強化していきたいです✨ 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物がすきな皆さま、小動物トークしましょう!