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

IE環境

modern.ie

実機、F12で開発者ツール

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

iOS環境

Web Inspector

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

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

Android環境

Genymotion

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

chrome

端末で「 端末設定 > 開発者向けオプション > USBデバッグ 」

USB接続してchrome://inspect/を開く

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

SP共通

Browsersync remote debug

ログの見られない端末をリモート操作するときに便利

http://localhost:3000/で作業中ならhttp://localhost:3001/にアクセス

Remote Debugger (weinre)をオンにするとインスペクタを見られるようになる

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

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

キャッシュ

chrome

• シークレットモード

command + shift + N

• リロード

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

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

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