Chrome'da bir HTTP POST'ta nasıl hata ayıklayabilirim?

Chrome'da gönderilen HTTP POST verilerini görüntülemek istiyorum.

Veriler artık bellekte ve formu tekrar gönderebiliyorum.

Sunucuyu tekrar gönderirsem hata göndereceğini biliyorum, yine de Chrome belleğindeki verileri görüntüleyebilir miyim?

1. Chrome Geliştirici Araçları'na gidin (Chrome Menüsü -> Diğer Araçlar -> Geliştirici Araçları)
2. "Ağ" sekmesini seçin
3. Bulunduğunuz sayfayı yenileyin
4. Ağ konsolu açıkken gerçekleşen http sorgularının listesini alırsınız. Soldan birini seçin
5. "Üstbilgiler" sekmesini seçin

İşte bu kadar!

Chrome DevTools ile HTTP POST isteklerine filtre uygulayabilirsiniz . Sadece aşağıdakileri yapın:

1. Açık Krom DevTools ( Cmd+ Opt+ IMac'te, Ctrl+ Shift+ Iveya F12Windows üzerinde) ve "Ağ" sekmesine tıklayın
2. "Filtre" simgesini tıklayın
3. Filtre yönteminizi girin: method:POST
4. Hata ayıklamak istediğiniz isteği seçin
5. Hata ayıklamak istediğiniz isteğin ayrıntılarını görüntüleyin

Ekran görüntüsü

Chrome Sürüm 53 ile test edilmiştir.

POST isteklerinin istek yükünü görmek için Chrome'un Kanarya sürümünü kullanabilirsiniz .

Yararlı olabilecek başka bir seçenek de özel bir HTTP hata ayıklama aracıdır. Kullanılabilir birkaç tane var, HTTP Toolkit'i öneriyorum : kendim için aynı sorunu çözmek için üzerinde çalıştığım açık kaynaklı bir proje (evet, taraflı olabilirim).

Temel fark kullanılabilirlik ve güçtür. Chrome geliştirici araçları basit şeyler için iyidir ve oradan başlamanızı öneririm, ancak oradaki bilgileri anlamakta zorlanıyorsanız ve daha fazla açıklamaya veya daha fazla güce ihtiyacınız varsa, uygun odaklanmış araçlar yararlı olabilir!

Bu durumda, aradığınız tüm POST gövdesini, dostça bir editör ve vurgulamayla (hepsi VS Code tarafından desteklenmektedir ) gösterecek, böylece kazabilirsiniz. Elbette size istek ve yanıt başlıklarını verecektir, ancak görebileceğiniz her standart başlık ve durum kodu için MDN ( Mozilla Geliştirici Ağı ) dokümanları gibi ekstra bilgilerle .

Bir resim bin StackOverflow yanıtına değer:

Diğer insanlar çok güzel cevaplar verdiler, ancak çalışmalarını ekstra bir geliştirme aracıyla tamamlamak istiyorum. Bu denir Canlı HTTP Başlıkları ve size takabilirsiniz Firefox ve içinde Chrome biz gibi aynı fiş var bu .

Onunla çalışmak çok kolay.

1. Firefox'unuzu kullanarak gönderi isteğinizi almak istediğiniz web sitesine gidin.

2. Firefox menünüzde Araçlar-> Canlı Http Başlıkları

3. Sizin için yeni bir pencere açılır ve tüm http yöntemi ayrıntıları sizin için bu pencereye kaydedilir. Bu adımda hiçbir şey yapmanıza gerek yoktur.

4. Web sitesinde bir etkinlik yapın (giriş yapın, form gönderin vb.)

5. Eklenti pencerenize bakın. Hepsi kaydedilir.

Sadece gerekir hatırlamak kontrol Yakalama .

Zor bir durumu var: Bir gönderi formu gönderirseniz, Chrome isteği göndermek için yeni bir sekme açar. Şimdiye kadar doğru, ancak dosya (lar) indirmek için bir olayı tetiklerse , bu sekme hemen kapanır, böylece bu isteği Geliştirme Aracı'nda yakalayamazsınız.

Çözüm: Posta formunu göndermeden önce , sekmenizi kapatmamak için isteğin başarıyla gönderilememesini sağlayan ağınızı kesmeniz gerekir . Ardından, istek mesajını Chrome Devtool'da yakalayabilirsiniz (gerekirse yeni sekmeyi yenileme)