みなさんこんにちは、ガノー（Twitter:Ganohr）です。
サイトの不具合を改修する際に、モバイルブラウザで表示しているときのコードがどうなっているのか調査しないといけないことがあります。
そんなときに使える「表示しているサイトのHTMLコードを書き出すブックマークレット」を開発しましたので公開します。
更新履歴
2023/01/09
view-source:との違いを追記2022/11/05 公開
view-source:とブックマークレットの違い
PCやスマホのブラウザでは、URLの先頭にview-source:を付けて読み込むことで、ソースコードをブラウザ上で確認できます。
この方法で得られるのは、実際は現在のページのアクセス段階でのHTMLです。
これは、今見ている画面のHTMLとは異なります。
対してこのページで紹介しているブックマークレットを利用すれば、実際にブラウザ上で表示されている現在のHTMLコードを取得できます。
ただし、サイトによっては大量の広告コードなどが入っているためコードが非常に長くなってしまうことがあります。
しかし、このブックマークレットで表示したコードは、ブラウザ上で検索ができますので、うまく活用することでサイトを解析するのに役立つでしょう。
実際、以下で公開しているWordPress及びウェブサイト上の不具合改修サービスでは本ブックマークレットを多く活用しています。
【WordPress】不具合対応/カスタマイズ/AMP/キャッシュ他迄対応しますランサーズで見積もり・カスタマイズの相談を承ります ... 外部サイトへアクセス
www.lancers.jpPC & Android Galaxyブラウザ用のブックマークレット
【ブックマークレットの内容】
html = document.getElementsByTagName('html');
w = window.open('','_blank');
w.document.documentElement.innerHTML
= html[0].innerHTML.replace(
/./gm,
(s) => s.match(/[a-z0-9\s]+/i) ? s : "&#" + s.charCodeAt(0)+";"
).replace(
/\n/,
"<br>"
);
ブックマークバーへこのリンクをドラッグ・アンド・ドロップして登録（クリックして閲覧中のサイトで実行）
Android Chromeブラウザ、iOS Safari、その他
上記のブックマークレットは、PC版のChromeまたは、一部のスマホブラウザからでしか利用できません。
スマホでは以下の手順でブックマークレットを起動します。
【スマホブラウザでのブックマークレット起動方法】
- 上記のブックマークレットをコピーする
- 「先頭がjavascriptから始まっていない」方をコピーして下さい。
- HTMLコードをコピーしたいページを表示する
- アドレスバーを表示し、入力されている内容を全て削除する
- アドレスバーに「javascript:」とタイプする
- 続けてブックマークレットの内容を貼り付ける
- 「→」ボタンなどを押して、実際にアクセスする
手順は多いですが、表示しているサイトのコードをスマホからコピペできるようになります。
開発者やデザイナーで、スマホでのコードを調査しないといけないことがある方には、かなり便利なツールかと思います。
タブに対応していないイニシエのブラウザ用
非常に古いSafariなど、イニシエのブラウザで動作を検証せねばならない場合に以下のコードをご利用ください。
別タブへ出力するのではなく、直接現在のコードをページ内に出力します。このブックマークレットを利用するもとのページが崩れますが、コードは閲覧できます。
javascript:html=document.getElementsByTagName('html');document.documentElement.innerHTML=html[0].innerHTML.replace(/./gm,(s)=>s.match(/[a-z0-9\s]+/i)?s:"&#"+s.charCodeAt(0)+";").replace(/\n/,"<br>")
