Webフロントエンドのデバッグ

IE環境

modern.ie

実機、F12で開発者ツール

cf. MacのVirtualBoxで起動したWindowsで:や@が出せない場合の出し方

iOS環境

Web Inspector

XcodeのSimulatorを立ち上げる
safariを開いて、開発 > Simulator > ページ選択
Simulator画面で表示されているサイトのインスペクタが見られる

実機のログを見る場合はこちら参照
cf. https://www.islog.jp/entry/ios-safari-web-inspecter/

Android環境

Genymotion

あるに越したことはないが、あまり信用できない

chrome

端末で 端末設定 > 開発者向けオプション > USBデバッグ
USB接続してchrome://inspect/を開く

cf. AndroidのChromeでフロントエンドを高速デバッグ

SP共通

Browsersync remote debug

ログの見られない端末をリモート操作するときに便利
http://localhost:3000/で作業中ならhttp://localhost:3001/にアクセス
Remote Debugger (weinre)をオンにするとインスペクタを見られるようになる

オプション
https://www.browsersync.io/docs/options/

cf. 【追記・訂正あり】【試してみた】BrowserSyncが2.0.1にバージョンアップしてた【超絶進化が止まらない】
cf. BrowserSyncが2.0になって設定画面ができてた

キャッシュ

chrome

シークレットモード

command + shift + N

リロード

通常はcommand + shift + Rで「ハード再読み込み」

インスペクタを表示した状態でリロードボタンを右クリックすると 「キャッシュの消去とハード再読み込み」でキャッシュを強めに消去できる

---

cf. JavaScript開発における多段式エラープルーフについて
cf. デバッグの技術