More than 5 years have passed since last update.

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

Last updated at 2017-09-13Posted at 2016-10-25

IE環境

実機、F12で開発者ツール

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

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

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

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

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

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

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

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

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

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

command + shift + N

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

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

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