'Chromedome',
['fbt'],
(function a(b, c, d, e, f, g, h) {
if (c.__markCompiled) c.__markCompiled();
g.start = function(i) {
if (i.off || top !== window || !/(^|\.)facebook\.(com|sg)$/.test(document.domain)) return;
var j = i.stop || h._("STOP\uff01"),
k = i.text || h._("\u3053\u308c\u306f\u958b\u767a\u8005\u5411\u3051\u306e\u30d6\u30e9\u30a6\u30b6\u6a5f\u80fd\u3067\u3059\u3002Facebook\u6a5f\u80fd\u3092\u6709\u52b9\u306b\u3059\u308b\u305f\u3081\u307e\u305f\u306f\u8ab0\u304b\u306e\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u30cf\u30c3\u30ad\u30f3\u30b0\u3059\u308b\u305f\u3081\u306b\u3001\u3053\u3053\u306b\u4f55\u304b\u3092\u30b3\u30d4\u30fc\u30fb\u8cbc\u308a\u4ed8\u3051\u3059\u308b\u3088\u3046\u306b\u8a00\u308f\u308c\u305f\u5834\u5408\u3001\u305d\u308c\u306f\u7b2c\u4e09\u8005\u304c\u3042\u306a\u305f\u306eFacebook\u30a2\u30ab\u30a6\u30f3\u30c8\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3092\u5f97\u308b\u305f\u3081\u306e\u8a50\u6b3a\u30fb\u4e0d\u6b63\u884c\u70ba\u3067\u3059\u3002"),
l = i.more || h._("\u8a73\u7d30\u306f{url}\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002", [h.param('url', 'https://www.facebook.com/selfxss')]);
if ((window.chrome || window.safari) && !i.textonly) {
var m = 'font-family:helvetica; font-size:20px; '; [[j, i.c1 || m + 'font-size:50px; font-weight:bold; ' + 'color:red; -webkit-text-stroke:1px black;'], [k, i.c2 || m], [l, i.c3 || m], ['', '']].map(function(s) {
setTimeout(console.log.bind(console, '\n%c' + s[0], s[1]));
});
} else {
var n = ['', ' .d8888b. 888 888', 'd88P Y88b 888 888', 'Y88b. 888 888', ' "Y888b. 888888 .d88b. 88888b. 888', ' "Y88b. 888 d88""88b 888 "88b 888', ' "888 888 888 888 888 888 Y8P', 'Y88b d88P Y88b. Y88..88P 888 d88P', ' "Y8888P" "Y888 "Y88P" 88888P" 888', ' 888', ' 888', ' 888'],
o = ('' + k).match(/.{35}.+?\s+|.+$/g),
p = Math.floor(Math.max(0, (n.length - o.length) / 2));
for (var q = 0; q < n.length || q < o.length; q++) {
var r = n[q];
n[q] = r + new Array(45 - r.length).join(' ') + (o[q - p] || '');
}
console.log('\n\n\n' + n.join('\n') + '\n\n' + l + '\n');
return;
}
};
})
ESC で表示・非表示が切り替えられます。
リロードボタン右クリックでオプションメニュー
デベロッパーツールが開いている状態でのみ、メニューが表示されてリロード方法を選択できるようになります。特に、最後の『キャッシュの消去とハード再読み込み』は、ショートカットキーが無いのでこのメニューからのみ利用できます。
ドラッグ & ドロップで要素を移動
ドラッグで top_1 の div を移動中です。ドロップすると移動され、CTRL+Z で元に戻ります
CSS のカラーフォーマットをその場で変更表示
カラー部分を、SHIFT を押しながらクリックすると、フォーマットが切り替わって循環します。
複数の ソース(js/css/html)より文字列検索
ソース(JS/CSS/HTML) の整形
ソースのスペースの表示
F1 で設定画面( preferences ページの Sources )
▼ スペース
▼ タブ
コンソールから関数のブレイクポイント作成
debug( 関数名 )
インスペクト直後のオブジェクト参照
$0
dir( $0 )
console.log では、以下のフォーマット文字列が使えます
console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;'); のように複数も可
その他
コンソールでは、SHIFT+Enter で複数行可
エレメンツの HTML を F2 で編集
copy コマンド( コンソールのみ ) でクリップボードへコピー
拡張機能そのもののオプション
▼ 切り替えると HTML
ファイルの作成や内容の保存も Google Chrome からできます(右クリックで表示されるポップアップメニューにあります)が、まずはエクスプローラでデバッグ実行に必要なファイルを用意します。
この際、フォルダ名はスペースや日本語は使ってはいけません(動作しませんでした/また親フォルダも同様だとは思われますが、そこまで確認はしていません)。そして、ファイル内のキャラクタセットは UTF-8 限定です。
test.html と test.js
ドラッグ&ドロップするか、Add folder to workspace で表示されるフォルダ選択ダイアログで選択します。
アクセスを許可する
Chrome の Filesystem タブに登録されます
ファイルを選択してタブを開く
この時点で普通のエディタです。バイナリファイルでも普通にそのまま開くので、ファイルの先頭部分の文字列ででファイルの種類を確認する事もできます。
HTML ファイル以外だとブレークポイントを使用できませんが、JavaScript のテキストがファイル内にあれば、その部分を選択して、CTRL+SHIFT+E(右クリックからのメニューでも実行機能があります/Evaluate in console) でその場で実行できます。
その方法だと、F12 で console で実行のように、現在開いているページの環境下で JavaScript を実行する事ができます。
ただ、ここではブラウザに実際に表示できる HTML 環境を基盤としてブレークポイントを使用しながら実行する手順を提示しています。
エディタで表示している HTML をブラウザで表示する
アドレスをクリップボードにコピーして、アドレスバーに貼り付けて表示すると、ファイルのアイコンの右下に緑色のマークが表示され、同期された事が確認されます
PAUSE アイコンをクリックする
押せる状態になっているのでクリックすると、灰色になります。この状態でページを再表示します。
そうすると、最初のスクリプト位置で停止します(この場合は jQuery の中です)。ここであわてずに、test.js のタブを表示してブレークポイントを設定します。
デバッグを開始する
ここからは、通常通りです。一番重要なのは、ページをロードしてPAUSE アイコンをクリックしてからブレークポイントを設定するという手順です。
通常コンソール用メモがわりに使う
無理にブレークポイントにこだわらなくても、選択した部分を実行する事ができるので、ファイルも普通のテキストファイルで問題ないし、Chrome から新規でファイルも作成できます。キャラクタセットが UTF-8 であれば、拡張子がなんであっても問題無いてすし、http(s) で表示したページの環境でをその選択した文字列を実行する事ができます。
もちろん通常のエディタとして行番号も表示されて、CTRL+G で行ジャンプ用のウインドウも表示されます。左下の {} アイコンで拡張子に見合った整形も行いますし、タブキーも行を複数選択して機能します。
同じ選択で CTRL+SHIFT+E で繰り返し実行したい場合は、開いているファイルのタブをクリックしてからキー入力します。
右クリックからの実行でもかまいません
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
