こんにちは！ギと申します！
Google Chrome 59がリリースされました。ブラウザと一緒に開発ツールのいくつかの新しい機能も追加されるので、今回は開発ツールの新しい機能を紹介させていただきます。
リリースノートはここに書いてあります。
新しい機能一覧
- CSS and JS code coverage: 使わないCSSやJSなどを検出する
- Full-page screenshots: ウェブサイト全体の内容をスクリーンショットする
- Block requests: requestをブロックする
- Step over async await: 非同期処理があっても、ステップデバッグできる
詳細
CSS and JS code coverage
HTMLに埋め込んでいるCSS、JSコードのカバレッジをチェックしてくれます。検出結果から不要なソースコードや変なロジックのところなどを見つけることができます。
この機能を使うには、まずはDev toolを開いて、More Toolsにある、Coverageタブをクリックします。
この機能を試すために、簡単なHTMLファイルを作りました。
```HTML
<!DOCTYPE html>
CSS、JSのCoverage機能をテストする
CSS、JSのCoverage機能をテストする
Test Button
JSファイル
```javascript
function test_func() {
alert(1);
}
上に書いたHTMLを少し修正して、JavaScriptの部分を別のファイルに分けておきます。
Jsファイルがブロックされたので、ボタンを押してもアラートが表示されません。
Step over async await
「async await」はES7の新しい機能です。async awaitを使うことで、非同期処理が簡単に実装できます。
以下はasync awaitの簡単な例です。
function wait(ms) {
return new Promise(r => setTimeout(r, ms))
}
async function main() {
console.log('ちょっと待って...')
await wait(1000)
console.log('もうちょっと待って...')
await wait(1500)
console.log('もうちょっと待って...')
await wait(2000)
console.log('終わった！ ')
}
Chrome 59以前は、ステップデバッグする際、非同期処理があったらデバッグが禁止されましたが、今回のバージョンから非同期処理があっても、ステップデバッグを続けることができるようになりました。
以上！
自社のエンジニアブログから