console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
GraphQL Network - GraphQLを開発者ツールで分かりやすく表示
GraphQLはREST APIの欠点を改善し、Web APIとして使われる場面が増えていくことでしょう。しかし開発中の難点として、エンドポイントがすべて同じURLであるために、どのアクセスなのかは深く見てみないと分からないという点があります。 そんなGraphQLの欠点を克服してくれるGoogle Chrome機能拡張がGraphQL Networkです。 GraphQL Networkの使い方 インストールすると、GraphQLタブが追加されます。 リクエスト内容やレスポンスが構造的に見やすくなります。 GraphQL Networkを使えばクエリ名が分かるので、どのリクエストを行ったのかが一目で分かります。パラメータも表示されるのでデバッグ時に重宝するでしょう。GraphQLを使って開発している方はぜひインストールしてみましょう。 GraphQL NetworkはJavaScript
Chrome for iOSにWebサイトデバッグツールが追加 | ソフトアンテナ
Chrome for iOSの最新版v73に、Webサイトの開発に役立つインスペクトツールが追加されたことが分かりました(9to5Google)。 Chromium Blogによると、Chrome for iOSで使用しているリリースバージョンのWKWebViewは、Safari Remote Debuggingをサポートしていないために、デバッグするためには常にソースコードからビルドする必要があったとのこと。 今回導入された開発者向けツールによってJavaScriptのログが収集可能となり、デバッグに対する障壁が取り去られることが期待されています。 インスペクトツールを使用する手順は以下の通りです。 「chrome://inspect」を開き「ログ記録を開始」をタップ 別のタブで対象のWebサイトを表示 「chrome://inspect」で表示されたログを確認 この機能を含め、最新のC
Mac/PCからのAndroid上のブラウザのリモートデバッグのまとめ - Nothing ventured, nothing gained.
スマートフォンやタブレットが主流になりつつあるが、それらモバイルデバイスでWebのデバッグするのは楽ではない。User Agent文字列を変更してモバイルデバイス上のブラウザの振りをしたMacやPCのブラウザからデバッグする方法もあるが、モバイルデバイスのブラウザの機能がMacやPCと同一ではなく、モバイル特有の状況もあるため、モバイルデバイスそのものを使った状態でデバッグしなければいけないことも多い。 そのような際に使われるのがリモートデバッグだ。 Mac/PCとAndroidの両方にブラウザを提供している主流ブラウザとしてはChrome、Firefox、Operaがあるが、このリモートデバッグ機能はこの3種のブラウザすべてに備わっている。また、ブラウザ開発元ではないが、Adobeもリモートデバッグ機能を提供している。すでに使っている人も多いと思うし、それぞれ多くの情報が提供されているの
packerで圧縮されたJavaScriptのdebug方法 - monjudoh’s diary
minifyされたJavaScriptは各種開発者ツールのdeminifierを使えば整形された状態でdebug出来ますが、packerで圧縮されたJavaScript(以下packed JS)はどうかという話。 Google Chromeの開発者ツール前提で話をするので他のブラウザについては誰か調べてみてください。 packed JSをdebugする際の壁はそれがevalで実行されることですが、Google Chromeの開発者ツールではevalで実行されたJSもdebug実行出来ます。 問題はどうやってdebug実行に持っていくかですが、globalから辿れる何らかのAPIがあるなら呼び出し元でブレークポイントを貼ってstep intoすれば良いです。 その場実行されるようなJSの場合はそれもできないので工夫が必要です。 以下は古いjQueryを使った例でそのような工夫は本来不要ですが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
