VS Codeの中でJavaScript/Node.jsのデバッグまでする（ひとり DevTools Advent Calendar 2020 – 21日目） | Ginpen.com
21 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 Chrome DevTools を使ってクライアント側に限らずサーバー側もデバッグできるんですが、それはそれとして開発中はエディターで開いたソースコードと行ったり来たりするのが面倒です。 VS Code なら Chrome DevTools （の機能）と連携して、エディター内でブレイクポイントを設置するなどできます。ちなみに DevTools の画面は今回出てきません。 先にまとめ サーバー側もクライアント側も VS Code からデバッグできる ブレイクポイントの設置 変数の閲覧 ログ出力 Run パネルからデバッグ設定を作成、デバッグ実行 Next.js などビルドを行うものも、ファイル出力できれば デモプロジェクト よければこちらご利用ください。JavaScript と No
Chromeのリモートデバッギング / Virtual boxのローカル開発環境にあるアプリを確認する
Virtual Boxのローカル開発環境で動くアプリを、Google Chromeを通してAndroidの実機で見る&デバッグする方法。なんかややこしい…ので適当にイメージ図にしました。個人的にはVagrant使ってますが、使ってなくても同じです。 すでにVirtual boxで開発環境が構築されていて、アプリがブラウザで確認できる状態を前提としています。 また、Mac/PCとAndroidが同じWifiに接続されている必要があります。 また、開発中のアプリへは dev.your-app.com で接続すると過程します。 で、こんなことができて便利。 USB接続 普通にMac/PCとAndroidを繋ぎます。 パソコンのChromeを立ち上げて、chrome://inspect/#devicesにいきます。 AndroidのChromeも立ち上げると、下のようになってるはず。 プロキシの設
知らないと損!?Remote Debuggingが個人的にすごかった件。
小ネタです。 Androidを使いこなしている人や制作者にとっては知ってて当然らしいのですが、Androidを使い始めて1ヶ月半の自分にとっては目からウロコでしたよ。 ChromeでAndroidのデバッグができるモバイルをベースに制作する案件が多い方でこの設定を行っていない人はやった方が良いです。 Remote Debugging on Android with Chrome Googleがちゃんと紹介してくれていました。USBをつないで設定すれば、Androidのchromeで開いているページをPCのChromeと同期してDevelopper Toolsで表示してくれるようになります。以下のようなイメージです。 右がPCで少し切れていますが、Developper Toolsが開いているのがわかります。 設定は簡単まず、以下の条件が必要です。 Chrome 32以上Android 4.0
iron-node – nodeアプリケーションをChrome DevToolsでデバッグ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました nodeで作ったソフトウェアはデバッグが面倒なイメージがあります。debugサブコマンドもありますが、コンソールでの入力は視認性やブレークポイントの挿入などが容易とは思えません。 そこで使ってみたいのがiron-nodeです。nodeアプリケーションをChrome DevToolsでデバッグできるようにするソフトウェアです。 iron-nodeの使い方 例えば以下のようなコードがあります。debuggerというのがポイントです。 var fs = require("fs"); debugger; console.log(fs); 後はiron-nodeコマンドでnodeアプリケーションを実行します。 $ iron-node test.js 実行すると専用のChrome DevToo
IEDiagnosticsAdapter - IEのデバッグにGoogle ChromeのDevToolsを使おう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のWebブラウザではデバッグツールが標準搭載されています。一番使いやすいと思うのはGoogle ChromeのDevToolsでしょうか。その他FirefoxもFirebugの流れがあって使いやすいです。正直デバッガーが使い勝手悪いと開発効率が大幅にダウンします。 IEでWebサイトの検証、デバッグをしないといけないのにデバッガーの使い勝手が悪くて進まない…そんな方はIEDiagnosticsAdapterをインストールしてみましょう。 IEDiagnosticsAdapterの使い方 IEDiagnosticsAdapterはプロキシとして動きます（とはいえ設定は不要です）。まずIEDiagnosticsAdapterを立ち上げておきます。 そしてGoogle Chromeで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
