2018/03/23更新

[フロントエンド] Charlesでcurlの通信もキャプチャする方法

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
フロントエンドの通信系のデバッグにCharlesが便利なのですが、curlコマンドなどの通信もCharlesで確認することができます。今日はその方法をブログに書きたいと思います。



目次




何が問題か

Charlesでは、ブラウザの通信内容は確認できますが、curlなどのプログラムの通信内容はキャプチャすることができません。それを見れるようにしたい、というのがこのブログの内容です。



curlの通信内容をCharlesで確認する

curlの通信内容をCharlesで確認するために、curlでプロキシのオプションを利用します。Charlesはローカルプロキシとして稼働していて、port=8888で起動しています。Charlesをプロキシとしてcurlに設定することで、curlの通信内容も確認できるようになります。

curlでプロキシを設定するには-xオプションを使います。
# -xオプションでプロキシを設定する
$ curl -x localhost:8888 https://www.yoheim.net
これでキャプチャをすることができるようになりました。



サーバーサイドのプログラムでも!

Node.JSやPHPなどのサーバーサイドのプログラムでも、curlと同様の要領でプロキシを設定すれば、Charlesで通信内容を見ることが出来ます。例えば以下は、Node.JSのrequest-promiseというモジュールで通信を行う場合に、proxyを設定した例です。
const options = {
    method : 'GET',
    url    : 'https://www.yoheim.net',
    proxy  : 'http://localhost:8888'    // <- proxy設定!
};

try {
    const res = await rp(options);
    return res;
} catch (err) {
    console.log('なんかエラーだ!', err)
}
このようにプロキシを設定してデバッグすると、デバッグ時間が短くなって素敵です。



最後に

Charlesはここ4〜5年ほど愛用しています。デモ版以降はライセンス料も数十ドル必要ですが、払う価値があるツールだと思います。ネットワーク系のチェックやデバッグが簡単にできて、非常に高速に開発できます。

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Python、Linux、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。