70」のWEB制作者が知りたい新機能を書いていきたいと思います。63が正式リリースされましたのでこちらについても詳しくまとめていきたいと思います。63」10月23日にFirefox63が正式リリースされました。パフォーマンスやビジュアルの改善点や新機能も含めて詳しくまとめていきます。63」で新しく追加された部分についてまとめています。Chrome70」がリリースされ、新機能が盛り込まれたことを書きましたが、今回はその新機能の一つでもある「ピクチャーインピクチャー」についてご紹介したいと思います。70」で、新機能として追加されたピクチャーインピクチャー。70の改善点・新機能まとめ前回の「Chrome69」では、賛否両論ありましたが、UIも含めて一新されたことが話題になりました。Chrome69がリリースされ、UIが大きく変わり話題になりました。フラットで丸みのあるデザインになりましたが、新しいデザインに関しては賛否両論あるようで、「元のデザインが良かった!」という意見も見かけます。Edgeのような見た目になってしまったな...と思いました。今回はそんな...この69で導入されたGoogleのサービスへのログインを、Chromeに反映する仕組みがプライバシー侵害になるのではないかとの指摘が相次ぎ、この問題を対処するなど様々な改善・新機能が搭載されていますので、詳しくまとめていきます。新機能1.自動的にChromeにもログインする機能を手動に従来のChromeは、ChromeでGmailなどにログインしても自動的にChromeにログインされるようになっていましたが、今回のバージョンから自動的にChromeにもログインする機能を手動で選択できるようになりました。「設定」から「詳細設定」をクリックする「プライバシーとセキュリティ」のセクションに「Chromeへのログインを許可する」という項目があり、この部分をOFFにする新機能2.自分のログイン状態を確認しやすくなったChromeの同期アカウントの「同期ステータス」を表示する新しいUIも公開されました。ユーザーのアカウント名の上に「同期していません」または「同期しています」と表示されるので、ログイン状況や同期状況をひと目で分かるようになりました。前回の69では、HTTPS非対応のWEBサイトでは警告が表示されるようになりましたが、今回の70でさらに強化されました。URLバー部分に「保護されていない通信」と表示されているWEBサイトでメールアドレスなどを入力しようとすると、赤いアイコンが表示されます。70では、macOSの“TouchID”とAndroidの指紋センサーで、Web認証に利用できるようになりました。デベロッパーツールの改善点・新機能まとめここからは、WEB制作者が知りたいデベロッパーツールの改善点や新機能などをまとめていきます。Expressionで、コンソールの値をリアルタイムに監視できるようになりました。値は250ミリ秒ごとに更新されます。そのノードをビューポートにハイライト表示できるようになりました。注意点強調表示されたノードは、入力すると更新されます。要素をフォーカスして追跡した後、ページをタブで移動すると、DevToolsは最初に式を入力したときにアクティブだったノードを強調表示します。次のような便利な表現もあります。現在フォーカスを持っているノードを強調表示します。document.querySelector(s)任意のノードを強調表示するためのものsで、CSSセレクタはどこですか?これは、DOMツリー内のノード上をホバリングするのと同じです。DOMツリーで現在選択されているノードを強調表示します。現在選択されているノードの親を強調表示します。大きなページをプロファイリングするとき、以前はパフォーマンスパネルでデータの処理とビジュアル化に数十秒かかっていました。70では処理とビジュアライゼーションが高速です。70では、ブレークポイントが消えたり、トリガされなかったりするいくつかのバグが修正されています。ソースマップに関連するバグも修正されています。一部のTypeScriptユーザーは、コードをステップ実行しながらDevToolsに特定のTypeScriptファイルをブラックボックス化するよう指示し、代わりにDevToolsはバンドルされたJavaScriptファイル全体をブラックボックスにします。これらの修正は、[ソース]パネルが一般的にゆっくり実行される原因となった問題にも対処しています。新機能5.コマンドメニューからネットワークのスロットルを有効にするコマンドメニューからネットワークのスロットリングを高速3Gまたは低速3Gに設定できるようになりました。新機能6.オートコンプリート条件付きブレークポイントオートコンプリートUIを使用して、条件付きブレークポイント式をより速く入力します。新機能7.AudioContextイベントを中断するライフサイクルイベントハンドラの最初の行を一時停止するには、イベントリスナブレークポイントペインを使用します。このAPIを使用して、オーディオを処理して合成できます。新機能8.ndbを使ってNode.jsをデバッグするndbはNode.jsアプリケーション用の新しいデバッガです。DevToolsを使用する通常のデバッグ機能に加えて、ndbには次の機能もあります。子プロセスの検出と添付。モジュールの前にブレークポイントを配置する必要があります。UI内のファイルの編集。既定では、現在の作業ディレクトリの外にあるすべてのスクリプトをブラックボックス化します。Labsの実験プロジェクトです。Chrome70」がリリースされ、新機能が盛り込まれたことを書きましたが、今回はその新機能の一つでもある「ピクチャーインピクチャー」についてご紹介したいと思います。70」で、新機能として追加されたピクチャーインピクチャー。フロントエンドエンジニア・デザイナーの社員Aです。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。人気記事Posting....。