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

こんにちは！

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

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

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

▼こちらもおすすめ

ゆにメモ

Firefox 63が正式リリース！新機能を詳しくまとめました！【何が変わった？】

https://blog.universe-web.jp/1867

こんにちは！社員Aです👩以前の記事で「Chrome 70」のリリースについて詳しく書いたのですが、10月23日にFirefox 63が正式リリースされましたのでこちらについても詳しくまとめていきたいと思います。▼Chrome70についてはこちら 10月23日にリリースされた「Firefox 63」10月23日にFirefox63が正式リリースされました。パフォーマンスやビジュアルの改善点や新機能も含めて詳しくまとめていきます。 「Firefox 63」新機能「Firefox 63」で新しく追加された部分についてまとめています。 Windowsユーザーのパフォ...

ゆにメモ

Chrome70の新機能「ピクチャーインピクチャー（PIP）」で動画を見られるように！

https://blog.universe-web.jp/2269

こんにちは！社員Aです👩以前の記事で「Google Chrome70」がリリースされ、新機能が盛り込まれたことを書きましたが、今回はその新機能の一つでもある「ピクチャーインピクチャー」についてご紹介したいと思います。▼前回の記事はこちら Chrome70で新機能ピクチャーインピクチャー（PIP）に対応！10月16日にリリースされた「Google Chrome 70」で、新機能として追加されたピクチャーインピクチャー。どういった機能なのか、ご存知の方もいるかと思いますが、簡単に言うと「再生している動画を、画面の隅に表示できる」機能...

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

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

▼前回の記事

ゆにメモ

Google Chrome 69で変更されたデザインを元に戻す方法

https://blog.universe-web.jp/1426

こんにちは！社員Aです👩弊社では10/4〜10/7まで社員旅行でタイに来ており、このブログは事前投稿しているものなのですが、旅の記録などは随時Instagramにアップしておりますので、ぜひご覧ください！さて、先日Google Chrome69がリリースされ、UIが大きく変わり話題になりました。よりフラットで丸みのあるデザインになりましたが、新しいデザインに関しては賛否両論あるようで、「元のデザインが良かった！」という意見も見かけます。個人的には、Microsoft Edgeのような見た目になってしまったな…と思いました。今回はそんな...

この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で そのノードをビューポートにハイライト表示できるようになりました。

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

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. 既定では、現在の作業ディレクトリの外にあるすべてのスクリプトをブラックボックス化します。

▼関連記事

ゆにメモ

Chrome70の新機能「ピクチャーインピクチャー（PIP）」で動画を見られるように！

https://blog.universe-web.jp/2269

こんにちは！社員Aです👩以前の記事で「Google Chrome70」がリリースされ、新機能が盛り込まれたことを書きましたが、今回はその新機能の一つでもある「ピクチャーインピクチャー」についてご紹介したいと思います。▼前回の記事はこちら Chrome70で新機能ピクチャーインピクチャー（PIP）に対応！10月16日にリリースされた「Google Chrome 70」で、新機能として追加されたピクチャーインピクチャー。どういった機能なのか、ご存知の方もいるかと思いますが、簡単に言うと「再生している動画を、画面の隅に表示できる」機能...