Kayce です。今月も DevTools の最新情報をダイジェストでお届けします。
コンソールの新機能
現在 Canary 版である Chrome 56 では、DevTools コンソールは CodeMirror をベースにしています。これにより、次のような新機能が利用可能になります。
入力時の構文のハイライト表示。これまで、DevTools で構文をハイライト表示できるのは、コードブロックが評価された後のみでした。
一致する括弧 / かっこ / 中かっこのハイライト表示。かっこ、角かっこ、中かっこが余分な場合は、DevTools で赤色でハイライト表示されます。
カーソルがいずれかのかっこの横にある場合、対応するかっこがグレーでハイライト表示されます。
スマート返品。複数行のコードブロックを入力するときに、Enter キーを押すたびに、新しい行を作成するのか、コードを実行するのかを DevTools が判断できるようになりました。たとえば、Console で次の for ループを評価するとします。
for (var i = 0; i < 5; i++) {
console.log(i);
}
以前は、最初の行を入力した後に Enter キーを押すと、DevTools によってその行が評価され、エラーが発生していました。コードブロックを新しい行に続行するには、Shift キーを押しながら Enter キーを押す必要があります。一方、DevTools では、Enter キーを押すと、期待どおりにコードブロックが新しい行に自動的に続行されます。
複数のカーソル。Command キー（Mac）または Ctrl+Alt キー（Windows、Linux）を押しながらクリックします。
カナリアで、上位以外のコンテキストが赤でハイライト表示される
最近コンソールで作業していた場合、実行コンテキスト セレクタが top 以外の値に設定されるという厄介なバグに遭遇したことがあるかもしれません。
このバグは Stable で修正されていますが、念のため、Canary 版 DevTools（Chrome 56）では、top コンテキストにないことをセレクタを赤くハイライト表示して警告します。
新しいユーザー エージェント: UC Browser
[ネットワーク状況] ドロワータブから、iOS、Android、Windows Phone 向けの UC Browser を選択できるようになりました。
共有は思いやり
いつものように、DevTools に関するフィードバックやアイデアをお寄せください。
- 簡単な質問やフィードバック、新しいアイデアを共有するには、Twitter の ChromeDevTools までお問い合わせください。
- 長いディスカッションの場合は、メーリング リストまたは Stack Overflow が最適です。
- ドキュメント関連については、ドキュメント リポジトリで問題を報告してください。
- Crbug で、いつでもチームに直接バグを報告したり、機能をリクエストしたりできます。
来月まで
Kayce