[JavaScript] スマホやタブレットでも使える開発者ツール！

「低スペだけどスマホやタブレットですぐに使える開発者ツールが欲しい」そう思ったこと一度はありますよね？((圧
ということで、作ってみました。
まあ、Safari上でHTML編集しかできないんですけどね。

javascript:(function() {
  let html = document.documentElement.outerHTML;
  document.head.innerHTML = '';
  document.body.innerHTML = '';
  document.documentElement.style.cssText = 'margin:0;padding:0;background:#fff;color:#000;box-sizing:border-box;width:100%;height:100%;overflow:hidden;';
  document.body.style.cssText = 'margin:0;padding:0;background:#fff;color:#000;box-sizing:border-box;width:100%;height:100%;overflow:hidden;';

  let style = document.createElement('style');
  style.innerHTML = `
    ::selection { background:#d7d4f0; }
    textarea::-webkit-scrollbar { display:none; }
    textarea { -ms-overflow-style:none; scrollbar-width:none; }
  `;
  document.head.appendChild(style);

  let wrapper = document.createElement('div');
  wrapper.style = 'width:100vw;height:100vh;overflow:auto;position:relative;box-sizing:border-box;display:flex;flex-direction:column;';

  let editor = document.createElement('textarea');
  editor.value = html;
  editor.style = `
    flex:1;margin:0;padding:20px 40px 20px 20px;background:#fff;color:#000;
    font-family:monospace;font-size:13px;white-space:pre;tab-size:2;
    border:none;outline:none;box-sizing:border-box;resize:none;width:100%;height:100%;
  `;

  let spacer = document.createElement('div');
  spacer.style = 'height:120px;flex-shrink:0;background:#fff;pointer-events:none;user-select:none;';

  wrapper.appendChild(editor);
  wrapper.appendChild(spacer);

  let buttonWrap = document.createElement('div');
  buttonWrap.style = `
    position:fixed;bottom:10px;right:10px;z-index:9999;display:flex;gap:10px;
  `;

  let makeButton = (text, onClick) => {
    let btn = document.createElement('button');
    btn.textContent = text;
    btn.style = `
      background:#e8e8e8;color:#000;padding:10px 14px;border:1px solid #ccc;
      border-radius:3px;font-size:13px;font-family:sans-serif;cursor:pointer;
    `;
    btn.onclick = onClick;
    return btn;
  };

  let applyBtn = makeButton('Apply', () => {
    let raw = editor.value;
    let temp = document.createElement('html');
    temp.innerHTML = raw;
    document.replaceChild(temp, document.documentElement);

    temp.querySelectorAll('script').forEach(orig => {
      let s = document.createElement('script');
      if (orig.src) s.src = orig.src;
      else s.textContent = orig.textContent;
      if (orig.type) s.type = orig.type;
      if (orig.defer) s.defer = true;
      if (orig.async) s.async = true;
      (document.head || document.body).appendChild(s);
    });
  });

  let closeBtn = makeButton('Close', () => {
    let temp = document.createElement('html');
    temp.innerHTML = html;
    document.replaceChild(temp, document.documentElement);
  });

  buttonWrap.appendChild(applyBtn);
  buttonWrap.appendChild(closeBtn);

  document.body.appendChild(wrapper);
  document.body.appendChild(buttonWrap);
})();

使い方は簡単。開発者ツールを使いたいサイトでSafariのブックマークレットに登録して実行するだけ！
※Safariでないと使えません。

本当は、CodeMirrorでリアルタイム色付け、自動タグ閉じも実装したかったんですが、処理的に重たくなったり、カーソルジャンプが酷かったりしたので諦めました。
もしCodeMirrorの実装を軽量化、自動タグ閉じの実装、カーソルジャンプを防げたりした場合は報告とコードをコメントに送ってくれると嬉しいです(((