備忘録

備忘録

ChromeやFireFoxの開発者ツールのブレークポイントを制限する方法

JavaScript

Ⅰ. はじめに
Ⅱ. やり方1（シンプルな実装）
Ⅲ. やり方2（devtools-detectを利用する方法）
参考

Ⅰ. はじめに

タイトルの通り「ChromeやFireFoxの開発者ツールのブレークポイントを制限する方法」です。

JavaScriptの難読化を行っていてもデバッガの強力な機能を利用して何らかの解析が可能になります。
そういった弱点を潰すことができます。

Ⅱ. やり方1（シンプルな実装）

1. 以下のHTMLをindex.htmlとして保存する

<html>
<body>
<p>Please open developer tools</p>

<script>
setInterval(() => {
  debugger
}, 100)
</script>
</body>
</html>

2. WEBブラウザでindex.htmlを開く

3. 開発者ツールを開く

4. 無限にブレークポイントで止まります。

※結果的に、ブレークポイントを利用したデバッグが不可能になります。
Firefoxの場合、Firefoxのプロセスがフリーズします。（Firefox 54で確認）
f:id:kagasu:20170728002834p:plain

Ⅲ. やり方2（devtools-detectを利用する方法）

1. 以下のHTMLをindex.htmlとして保存する

<html>
<body>
<p>Please open developer tools</p>
<script src="https://sindresorhus.com/devtools-detect/index.js"></script>

<script>
window.addEventListener('devtoolschange', () => {
  while(true) {
    debugger
  }
})
</script>
</body>
</html>

（以下省略）

devtools-detectの動作確認

ブラウザ	結果
Chrome 60	OK
Firefox 54	OK
IE 11	NG

※IEはサポートされていません

留意点

devtools-detectを利用して開発者ツールを別ウィンドウとして表示させた場合 devtoolschange イベントは発火しません

参考