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）を押しながらクリックします。
Canary では、トップ以外のコンテキストが赤色でハイライト表示される
最近コンソールを扱っていた方は、実行コンテキスト セレクタを top 以外の値に設定するという小さなバグに遭遇したことがあるかもしれません。
このバグは Stable で修正されていますが、念のため、カナリア版（Chrome 56）の DevTools では、top コンテキストにないことをセレクタを赤くハイライト表示して警告します。
新しいユーザー エージェント: UC Browser
[Network conditions] ドロワータブから iOS、Android、Windows Phone 用の UC ブラウザを選択できるようになりました。
共有は思いやり
いつものように、DevTools に関するフィードバックやアイデアをお寄せください。
- 簡単な質問やフィードバック、新しいアイデアを共有するには、Twitter の ChromeDevTools までお問い合わせください。
- 長時間のディスカッションには、メーリング リストまたは Stack Overflow が最適です。
- ドキュメントに関するご質問については、ドキュメント リポジトリで問題を報告してください。
- Crbug で、いつでもチームに直接バグを報告したり、機能をリクエストしたりできます。
来月まで
Kayce