GitHubでの確認を楽にする5つのスクリプト(Chromeデベロッパーツール使用)

GitHubのコードを確認しやすくする

最近ではコーディングで作成されたコードはGitHubを併用するのが当たり前になってきている。

GitHubを使用すればファイルがバージョン管理されるため差分が確認できたり、共同作業の際に便利なのだが、そのまま使用すると若干使いづらいこともある。

この記事ではコードを確認する際に便利なChromeデベロッパーツールで使用可能な便利なスクリプトを5つ紹介する。

スクリプトはChromeデベロッパーツールのConsoleで実行する。

SourcesのSnippetsに登録しておけば簡単に呼び出して実行できるので便利だ。

1. タブを半角スペースに変換する

GitHubではタブのインデントは半角スペース8個分で表示されるためインデントが多いとコードが外側に表示されやすくなり、見にくくなってしまう。

そんなときは以下のスクリプトを実行するとタグを半角スペース2個分に変換できる。

{
  const html = $$('.blob-code-inner');
  html.forEach(x => x.innerHTML = (x.innerHTML).replace(/\t/g, '  '));
}

2. 削除分を非表示にする

GitHubではコードの削除した部分は赤、追加した部分は緑で表示されるが削除された部分を表示せずに追加した部分だけを表示したいことがある。

以下のスクリプトを実行すると削除した部分を非表示にできる。

$$('.blob-code-deletion').forEach(x => x.parentElement.style.display = 'none');

3. 修正したファイルのパスだけ表示

プッシュされたファイルの一覧に余計なファイルがまざっていないか確認するときはコード部分は非表示にしたほうが見やすい。

{
  const target = $$('.blob-wrapper') ? $$('.blob-wrapper') : $$('.js-file-content');
  const target2 = $$('.render-wrapper');
  const target3 = $$('.image');
  target.forEach(x => x.style.display = 'none');
  target2.forEach(x => x.style.display = 'none');
  target3.forEach(x => x.style.display = 'none');
}

4. 修正したファイルタイプの個数を表示

どのファイルを何ファイル修正したかカウントしたい場合は以下のスクリプトを実行するとファイルタイプとファイル数が表示される。

{
  const target = $$('.toc-diff-stats')[0] ? $$('.toc-diff-stats')[0] : $$('.details-collapse')[0];
  const path = $$('#files .user-select-contain').length ? $$('#files .user-select-contain') : $$('.file-info a');
  let html = target.innerHTML + '<br>';
  let obj = {};
  const files = path.map(x => {
    return (x.textContent).trim().replace(/^.+\.(.+?)$/g, '$1')
  });
  files.forEach(x => { obj[x] = (obj[x] || 0) + 1; });
  for (let prop in obj) {
    html += ' ' + prop + ' ' + '<span class="counter" style="margin-right: 1em;">' + obj[prop] + '</span>';
  }
  target.innerHTML = html;
}

5. 修正したファイル一覧をクリップボードにコピーする

修正したファイル一覧をどこかに記載したり、報告するためクリップボードにコピーしたい場合は以下のスクリプトを実行する。

{
  const path = $$('#toc > .content > li > a');
  const t = path.map(x => (x.textContent).trim());
  console.info(t.join('\n'));
  copy(t.join('\n'));
  console.log('copy!');
}