What's new in DevToolsYouTube↗  IA↗(long shot)
Science & Technology  17K views 470 likes 32 dislikes   17 Dec 2020
Chrome for Developers 814K subscribers N/A YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
♪
(upbeat music)
- 皆さん こんにちは シェフのジェセリンです
- Hi everyone, I'm Chef Jecelyn
Chrome DevToolsチーム所属です
from the Chrome DevTools Team.
これはお手製の出来立てチャーハン
(snaps) This is a plate of fried rice I just made.
これを作るにはガーリックと——
To prepare this, you need garlic,
ライス、エッグ、アンチョビ、 トマトが必要です
rice, egg, anchovies, and tomato.
この「GREAT」な食材から——
These are the great ingredients
美味しいチャーハンができます
that make this tasty fried rice.
うーん！
(sniffs) Hm!
匂いもGREAT
It smells great too.
GREATなことは他にも
You know what else is great?
Chrome DevToolsの GREATな新機能は——
Chrome DevTools has great new features
サイトのデバッグ向上に役立ちます
to help you better debug your site.
では こうしたGREATな機能を 一緒に見ていきましょう
Let us dive into these great features together.
まず「G」 グリッドのツールから紹介します
(snaps) First off, we have G for the great toolings.
ついに DevToolsが CSSグリッドの——
DevTools now, finally, has further support
デバッグにも対応するようになりました やった！
for CSS grid debugging. Yes!
グリッドに ３つの定義済みエリア——
Say you have a grid with three defined areas,
バナー、サイドバー、コンテンツが あるとします
banner, sidebar, and content.
ページはこう表示されます
Here is how the page looks like.
[Elements]パネルには——
In the elements panel,
新しいgridバッジが追加されました
notice that there is a new grid batch
グリッド要素の横に表示されます
added next to the grid element.
ここをクリックして グリッド、オーバーレイ、 行番号を切り替えます
Click on that to toggle the grid, overlay, and line numbers.
新しい[Layout]ペインでは オーバーレイを——
You can customize the overlay further
細かくカスタマイズできます
in the new layout pane.
たとえば 行ラベルを非表示にして——
For example, you can hide the line labels,
エリア名を表示できます
view the area names,
デバッグしやすいように グリッド線を拡げることも——
or extend the grid lines for better debugging.
オーバーレイの色を変更することもできます
You can even change the color of the overlay.
さらにすごいことに グリッドの アニメーションに応じて——
What is even greater is, when you animate the grids,
ラベルも回転するようになりました
the labels will rotate accordingly as well.
詳細は以上です
And that is the detail.
お試しください
Go try it out.
次は「R」の[Rendering]タブと [Sensors]タブ
Next, the R for the rendering tab and sensors tab.
場所を設定してロケールを エミュレートできることをご存知ですか？
Do you know you can emulate locales by setting a location?
たとえば 次回の料理クラスは マレーシア時間の——
For example, I have an upcoming cooking class on 12:00 p.m,
Xmasイブ 午後12時にあります
Christmas Eve, Malaysia time.
視聴者は世界中にいます
I have audience from all around the world.
そのため ページに表示する クラスの時間は——
I would love my page to display the class time
視聴者のタイムゾーンに 基づいたものにしたいですね
according to my audience time zone.
[Location]を[Tokyo]に 設定してページを更新すると
Now, set the locations to Tokyo and refresh the page.
クラスの時間が東京時間の午後１時に 更新されました
The class time is now updated to 1:00 p.m, Tokyo time.
この機能は 特にサイトが複数の言語や——
This feature is handy, especially if your site
タイムゾーンに対応している場合に便利です
supports multiple language and time zone.
次に 新たにアイドル状態 エミュレーションを追加して——
Next, we added a new Idle State Emulations
Idle Detections APIに 対応するようにしました
to support the Idle Detections API.
このAPIを使うと 非アクティブな ユーザーを検出して——
This API allow you to detect inactive users
アイドル状態の変化に反応できます
and react on idle state changes.
たとえば このページは ご飯物の注文キオスクです
For example, imagine this page is a rice ordering kiosk.
画面ロック時には プロモーションの——
When the screen is locked, you might want to display
スライドショーを表示します
slideshows of your promotions.
ユーザーが再びアクティブになったら——
When the user is active again,
注文ページにリダイレクトします
redirect them to the ordering page.
これまでは このような状態の変化は デバッグしにくいものでした
These state changes were hard to debug previously
実際にアイドル状態が——
because you need to wait
変わるまで待つ必要があったためです
for the actual idle state to change.
もう二度と待たずに済みますね
Now, spend no time waiting for that error again.
次にご紹介するのは 新しい——
Next, let's take a look at the new
ローカルフォント無効化の エミュレーションです
disable locker fonts emulations.
たとえば フォントファミリーRubikを——
Say, if you define a font family, Rubik,
font-faceルールで定義します
in the fonts-face rule,
ローカルにRubik Lightがある場合は ソースをそのフォントに設定し——
and set the source to local Rubik Light locally when found,
ない場合はリモートのRubik-Blackに フォールバックするとします
and fall back to the remote Rubik-Black font if it's not.
[Computed]ペインを見ると 現在のフォントは——
In the computer pane, you can see the current font
ローカルのRubik Lightフォントで レンダリングされています
is rendered using Rubik Light font locally.
開発中は——
During development,
ローカルソースを 無効にしたいかもしれません
you might want to disable the local sources
適切にウェブフォントを デバッグして検証するためです
to properly debug and verify your web fonts.
では これを行ってページを 更新してみましょう
Let's try to do that and refresh the page.
フォントはRubik Blackで——
See, the font is now Rubik Black
ネットワークリソースから読み込まれますね
loaded from the network resource.
また DevToolsには新しくCSS メディアエミュレーションも追加され——
DevTools also added a new CSS media emulations
prefers-reduced-data メディアクエリのエミュレートが可能になります
to emulate prefers-reduced-data media query.
この例をご覧ください
In this example,
データ保存モードがオンの場合 このCSSコードによって——
we have this CSS code to skip downloading custom web fonts
カスタムウェブフォントの ダウンロードがスキップされます
if the user turn on data saving mode.
prefers-reduced-data エミュレーションを有効にしてみます
Enable the prefers-reduced-data emulations.
ご覧のとおり [Rendered Fonts]は——
See, the rendered fonts is now
システムフォントのArialに フォールバックします
full back to the system font Arial instead.
次は「E」 [Elements]パネルの機能強化です
Next, E for the elements panel enhancements.
作成済みのスタイルは編集できません
You cannot edit the styles creator
JSフレームワークのCSSや——
with the CSS in JS frameworks
CSS Object Model APIで 作成したスタイルのことです
and the CSS object model APIs.
ここに 数個の卵が掲載された ページがあります
Here, we got a page with a few eggs.
これは 卵をアニメーションさせるための JSコードのCSSです
Let's say these are the CSS in JS code to animate them.
コードをクリックして実行したら——
Click and run the code,
卵の中の１つを右クリックして 確認しましょう
then right-click and inspect one of the eggs.
[Styles]ペインでは アニメーションを 編集できるようになりました
You can now edit the animations in the style panes.
これまで このスタイルは編集不可能でした
This styles were not editable previously.
ところで 先ほどの [Styles]ペインにあった——
Next, did you spot a new button
新しいボタンにお気づきになりましたか？
in the Style pane just now?
この小さいボタンで [Computed] サイドバーペインに切り替えられます
This little button let you toggle the computer sidebar pane.
[Styles]と[Computed]の 両方のペインを——
Now, you can view both styles and computer panes
同じ画面に表示できます
on the same screen.
特に 大画面のユーザーに朗報ですね
Good news, especially for those big screen users.
[Computed]ペインには [Group]チェックボックスも追加されます
We added a group chat box in the computer pane as well.
この新しいチェックボックスで 計算済みプロパティをグループ化できます
This new chat box lets you group the computer properties.
今 確認しているのは 卵のアニメーションです
Since I'm looking on the egg animations now,
気になるアニメーションの プロパティのみに——
this allow me to easily focus
簡単にフォーカスできます
on just the animation properties that I care about.
卵のコンテナのスクリーンショットを 撮りたい場合は——
If you want to take a screenshot of the egg container,
おすすめのショートカットがあります
we have a shortcut for you.
EGGS要素をクリックして [Capture node screenshot]を選択します
Click on the egg element and select capture node screenshot.
すると スクリーンショットを撮影できます
There you have your screenshot taken.
ステキですね！
Sweet!
focus-visible疑似クラスは——
The focus-visible pseudo-class
フォーカスされている要素のスタイルを 設定するネイティブなCSSの手法です
is a native CSS way to style elements that are in focus
フォーカスを表示するには visibleインジケーターが必要です
and need a visible indicator to show focus.
DevToolsを使って——
You can now use DevTools to force
focus-visible状態を強制して テストできるようになりました
and test the focus visible state.
次はAccessibilityの「A」 ユーザー補助機能の強化です
Next, we have A for accessibility enhancements.
[Inspect Mode]の ツールチップに——
The Inspect Mode Tooltips now displays
表示されるユーザー補助情報が増えました
more accessibility information.
要素にカーソルを合わせると [Inspect Mode]のツールチップには——
Hoer to the element. The Inspect Mode ToolTips
その要素にユーザー補助機能名や ロールがあるかどうかが表示されます
indicates whether the element has an accessible name,
キーボードフォーカス可能かどうかも 表示されます
role, and whether it is keyboard-focusable.
新しい[Emulate vision deficiencies]機能も使えます
Use the new emulate vision deficiencies feature
さまざまなタイプの色覚特性の方には——
to get a better idea of how people
サイトがどのように見えるのでしょうか
with different type of vision deficiencies
それがよくわかります
experience your site.
DevToolsは 視力障がいや——
DevTools can emulate blurred visions
４つの異なるタイプの色覚特性を エミュレートできます
and four different types of vision deficiencies.
たとえば １型２色覚は——
For example, protanopia is the inability
赤色や緑色を認識することができません
to perceive red and green color.
AnchovyとDeliciousの どちらのテストカラーも——
The test color of both anchovy and delicious
認識できません
are not accessible.
しかし 通常の視力の方には 問題なく見えるかもしれません
But it might still look okay for people with normal vision.
では １型２色覚のエミュレーションを 有効にしましょう
Let's enable protanopia emulations.
AnchovyとDeliciousの どちらも——
Notice that the color contrast of both anchovy
見分けにくい色のコントラストに なりましたね
and delicious are becoming even worse now.
テキストはほとんど読めません
The texts are almost unreadable.
他のタイプの色覚特性 エミュレーションも試して——
Go try out other type of vision deficiency emulations
ご自身で体験してみましょう
to experience yourself.
次に 色のコントラストが 低いテキストは——
Next, you can fix the low color contrast texts
色候補で修正できます
with our color suggestions.
Anchovyの色を修正してみましょう
Let's try to fix the color of anchovy.
要素を選択して [Style]ペインで色選択ツールを開き——
Select the element, open the color picker in the style pane,
[Contrast ratio]セクションを 展開します
expand the contrast ratio section.
ここでは AAとAAAの色候補が 提供されています
Here we provide AA and AAA color suggestions.
色候補をクリックすると 色が修正されますね
Click on the suggested color and see the color is fixed.
ページを要素ごとに確認し 色のコントラストの問題を——
It might be tedious to go through each element of the page
全部見つけるのは 面倒かもしれません
and try to spot all the color contrast issues.
そこで DevToolsの出番です
DevTool is here to help.
[CSS Overview]パネルを ワンクリックするだけです
In just one click, the CSS overview panel
ページ内で 色のコントラスト比が——
helps you to identify
低いテキストをすべて特定できます
all the low color contrast texts of your page.
このレポートには ページの２つの問題が示されています
Here, the report shows two issues of the page.
問題をクリックすると——
Click on the issue.
問題のある要素のリストが表示されます
You can view the list of elements that have the issues.
要素にカーソルを合わせ クリックして修正します
Click to focus on the element and fix it.
最後の文字は「T」
The final letter, T,
DevToolsのタブとパネルが 刷新されました
represents new tabs and panels in DevTools.
ブラウザの警告についての コンソールを見ても——
Have you ever seen a console for browser's warnings,
修正方法のヒントが 何もなかったことはありませんでしたか？
and you have no clue on how to fix it?
新しい[Issues]タブの目的は その改善です
The new issues tab aim to improve that.
コンソールを開きます サイトに問題があると——
Open the console. A message will be shown
メッセージが表示されます
if your site has issues.
[View Issues]をクリックすると [Issues]タブが表示されます
Click on view issues to open the issues tab.
問題を展開すると——
Expand the issue.
詳しい情報が提供されます
It provides you more information,
影響するリソースや 修正方法のガイダンスも表示されます
effective resources, and guidance on how to fix it.
次に Web Authentication APIをデバッグできるようになりました
Next, you can now debug the web authentication API
これには 新しい[WebAuthn]タブを 使います
with the new WebAuthn tab.
[WebAuthn]タブを開き——
Open the WebAuthn Tab,
バーチャル認証器を作成します
create a virtual authenticator,
本物のデバイスの役目を 果たしていることがわかります
and watch it play the part of a real device.
さまざまな認証器をバッグに詰めて——
There's no need to carry around a bag
持ち運ぶ必要はありません
with different authenticators
そんなことをしなくても 実装をデバッグできます
to debug your implementation anymore.
DevToolsは 上部と下部の パネル間のツールの移動にも——
DevTools now support moving tools between the top
対応するようになりました
and the bottom panel.
こうすれば２つのツールを 一度に表示できます
This way, you can view any two tools at once.
たとえば [Elements]パネルと——
For example, if you would like to view the elements
[CSS Overview]パネルを 一緒に表示してみましょう
and the CSS overview panel together,
[CSS Overview]パネルを 右クリックし——
you can right-click on the CSS overview panel
[Move to bottom]を選択して 下に移動します
and select move to bottom to move it to the bottom.
こうすれば 要素を表示して フォーカスを当て——
This way, is easier for you to view, focus on an element,
編集することを コンテキストを切り替えずに行えます
and edit it without switching context.
最後に 新しいメディアパネルを使って——
Last one, use the new media panel
メディアプレーヤー情報を表示して デバッグしてみましょう
to view and debug media player information.
これは 動画プレーヤーを含むページです
Here, I have a page with a video player.
動画を再生して [Timeline]ペインを開きます
Play the video and open the timeline pane.
動画の一時停止、再生、 早送りを 行ってみましょう
Try to pause, play, and fast-forward the video.
動画の再生とバッファリングの ステータスが——
The video playback and buffering status
リアルタイムで更新されます
are updated in real time.
プロパティ、イベント、メッセージの 情報が一緒に表示されます
Together with properties, events, and messages information,
このパネルを使えば 潜在的な——
this panel could help you identify
メディア問題をすぐに特定できます
potential media issues quicker.
DevToolsには WebAssemblyのデバッグと——
DevTool have some new improvements on web assembly
安全なコンテキストのデバッグに関する いくつかの新しい改善点があります
and secure context debugging as well.
これについては イングバルとカミーユのプレゼンをご覧ください
Check out the Talks by Ingvar and Camille for that.
ふぅ！　以上です
Phew! That's all.
こうした「GREAT」な新機能を ぜひお試しください
Remember to try out these great new features.
６週間ごとに DevToolsの新機能についての——
Every six weeks, I will publish the what's new
投稿と動画を公開する予定です
in DevTools posts and video.
アップデートをお見逃しなく
Don't miss the updates.
TwitterとYouTubeで フォローしてくださいね
Follow us on Twitter and YouTube.
ご覧いただきありがとうございました
Thanks for watching. See you!
では 美味しいチャーハンをいただきます
I'm going to enjoy my great fried rice now.
おっと エンジニアリングブログが あるのをご存知ですか？
Oh, do you know we have an engineering blog?
詳しくはこちらのリンクからご確認ください
Go to this link to find out more.
ちなみに——
And by the way,
チームメイトのティム、ジャック、 ポールがプレゼンをします
my teammates, Tim, Jack, and Paul have a talk
DevToolsのアーキテクチャを どのようにモダンウェブに——
about how we upgraded the DevTools Architecture
アップグレードしたかについてです
to the Modern Web.
忘れずにチェックしてくださいね
Remember to check that out.
では またお会いしましょう ♪
See you next time. (upbeat music)
Similar videos:

What’s new in DevTools
Chrome for Developers
12.1K views 294 likes 8 dislikes 13 Jul 2020100% match

Chrome 80 - What’s New in DevTools
Chrome for Developers
76.3K views 1.9K likes 63 dislikes 03 Feb 202067% match

Chrome 88 - What’s New in DevTools
Chrome for Developers
86.9K views 852 likes 99 dislikes 14 Jan 202167% match

Chrome 67 - What's New in DevTools
Chrome for Developers
57.9K views 703 likes 12 dislikes 01 Jun 201867% match

Chrome 59 - What's New in DevTools
Chrome for Developers
160.2K views 1.2K likes 16 dislikes 02 Jun 201767% match

Chrome 75 - What’s New in DevTools
Chrome for Developers
93K views 1.2K likes 38 dislikes 04 Jun 201967% match

Chrome 64 - What's New in DevTools
Chrome for Developers
139.5K views 983 likes 21 dislikes 17 Jan 201867% match

Chrome 87 - What’s New in DevTools
Chrome for Developers
74.1K views 840 likes 131 dislikes 12 Nov 202067% match

Chrome 68 - What's New in DevTools
Chrome for Developers
107K views 907 likes 16 dislikes 13 Jul 201867% match

Chrome 65 - What's New in DevTools
Chrome for Developers
111.4K views 998 likes 17 dislikes 02 Mar 201867% match

Chrome 84 - What’s New in DevTools
Chrome for Developers
10.5K views 382 likes 58 dislikes 30 Nov 202067% match

Chrome 66 - What's New in DevTools
Chrome for Developers
63.3K views 889 likes 16 dislikes 13 Apr 201867% match

Chrome 62 - What's New in DevTools
Chrome for Developers
70.8K views 874 likes 16 dislikes 13 Oct 201767% match

Chrome 63 - What's New in DevTools
Chrome for Developers
60.8K views 826 likes 13 dislikes 29 Nov 201767% match

Chrome 71 - What’s New in DevTools
Chrome for Developers
75.2K views 971 likes 27 dislikes 30 Nov 201867% match

Chrome 76 - What’s New in DevTools
Chrome for Developers
92.6K views 1.4K likes 35 dislikes 14 Jul 201967% match

Chrome 81 - What’s New in DevTools
Chrome for Developers
91.4K views 1.1K likes 42 dislikes 12 Mar 202067% match

Chrome 74 - What’s New in DevTools
Chrome for Developers
89K views 1.3K likes 26 dislikes 19 Apr 201967% match

Chrome 79 - What’s New in DevTools
Chrome for Developers
41.3K views 908 likes 23 dislikes 10 Dec 201967% match

Chrome 86 - What’s New in DevTools
Chrome for Developers
46.8K views 855 likes 83 dislikes 01 Oct 202067% match

Chrome 70 - What’s New in DevTools
Chrome for Developers
81.9K views 1.5K likes 27 dislikes 05 Oct 201867% match

Chrome 61 - What's New in DevTools
Chrome for Developers
127K views 941 likes 20 dislikes 25 Aug 201767% match

Chrome 83 - What’s New in DevTools
Chrome for Developers
11K views 365 likes 35 dislikes 08 Oct 202067% match

Chrome 85 - What’s New in DevTools
Chrome for Developers
62K views 939 likes 97 dislikes 26 Aug 202067% match

Chrome 60 - What's New in DevTools
Chrome for Developers
100.9K views 1.1K likes 29 dislikes 14 Jul 201767% match

Chrome 77 - What’s New in DevTools
Chrome for Developers
89.8K views 1.5K likes 47 dislikes 03 Sep 201967% match

Chrome 73 - What’s New in DevTools
Chrome for Developers
97K views 1.8K likes 32 dislikes 08 Mar 201967% match

Chrome 78 - What’s New in DevTools
Chrome for Developers
34K views 776 likes 24 dislikes 14 Oct 201967% match

Chrome 89 - What’s New in DevTools
Chrome for Developers
31.2K views 669 likes 70 dislikes 25 Feb 202167% match

Chrome 72 - What’s New in DevTools
Chrome for Developers
67.5K views 1K likes 19 dislikes 28 Jan 201967% match


Settings Privacy About Contact Donate