ブラウザ系のイベントをモバイルとかブラウザとか色々調査することがあったので、いろいろ試せるbrowser-event-checkerというツールを作ってみました👀

browser-event-checker

使い方

使い方は簡単で、ブラウザでアクセスすると発火した各種イベントが画面に記録されていきます✍

f:id:madogiwa0124:20190608223511g:plain

これだけです😇

ですが、スマホとかだとconsole.logが見れないので各ブラウザでイベントが発火しているので調べるの辛いと思うので、そのへんが画面に表示されるのは便利なのかなと💦

リロードしても画面はそのままになるはずなので、閉じるとかリロードとかで発火するイベントのログも見ることができます👀

ちなみにサポートしているイベントは下記の通りです🙇‍

Window
- pageshow
- load
- focus
- beforeunload
- pagehide
- blur
Document
- visibilitychange

仕組み

どうやってイベントの発火を記録して表示いるのかというと、かなりシンプルでコードだと下記のような感じです👩‍💻

// ログを反映する画面要素
let consoleNode = document.getElementById('console');
// LocalStrageからログを取得
const initConsoleStack = window.localStorage.getItem('consoleStack');
// あれば変数にいれて無ければ、[]を判定
let consoleStack = initConsoleStack ? initConsoleStack.split(',') : [];

// ブラウザのLocalStrageにlogを保存
function pushLocalStrage(message) {
  return new Promise(function(resolve){
    consoleStack.push(consoleStack.length + ': ' + message);
    window.localStorage.setItem('consoleStack', consoleStack);
    resolve();
  })
}

// LocalStrageに保存されているログ([hoge, fuga, piyo...])を改行タグ区切りで画面に反映
function setConsoleStackToNode() {
  consoleNode.innerHTML = consoleStack.join('</br>');
}

// window.load時にログを出力して記録・表示
window.addEventListener('load', function () {
  const message = "browser-event-checker: window load!";
  console.log(message);
  pushLocalStrage(message).then(setConsoleStackToNode);
})