ブラウザ上のHTMLで編集したい場所を Vim で開く

ブラウザ上のHTMLで編集したい場所をエディタで開きたい時はよくあります。 特に面倒なのは、大きなテーブル要素を編集する時や、巨大な HTML を編集する時でしょうか。 HTML を開いて該当箇所を探すのが面倒です。

作ればいいじゃんと気付いたので、Vim で使えるものを作ってみました。

var node = document.querySelector('ここにCSS Selectorをコピペ').outerHTML;
var html = document.doctype + document.documentElement.outerHTML;
var pos = html.indexOf(node);
var arr = html.slice(0, pos).split("\n");
var col = arr[arr.length-1].length + 1;
console.log('cal cursor(' + arr.length + ', ' + col + ')');

使い方: ブラウザで Dev Tools を開き、編集したい要素の CSS セレクタを「Copy selector」で、クリップボードにコピーします。 コピーした CSS セレクタを上記のスクリプトにコピペし、Console 上で実行します。 すると「cal cursor(78, 5)」という、HTML ソースに対応したカーソル移動関数を出力してくれます。 Vim 上でこの関数を実行すれば、編集したい箇所にすぐ移動できます。


Chrome Extension で作ったり、Vim の channel を使えばもっと良いものができるかも知れないです。 ただ Chrome Extension だとクリップボード周りが無理気味に見えました。 Vim の channel は自分用サイトのデバッグなら可能でも、他人のサイト上で実行が難しそうに見えました。 汎用的に使えるのは、このコピペ実行かなと思ったので、共有します。

もっと簡単な実行方法あるのかなあ。