Q&A
ご回答ありがとうございます。確認してみます！
実現したいこと
chromeでレスポンスデータを確認したい
前提
JSON形式で受け取ったレスポンスデータを確認したいのですがやり方がわかりません。
発生している問題・エラーメッセージ
現状choromeのディペロッパーツールのところで確認すべき、というのはわかったのですがその先に進めておりません。どこで確認できるかご教示いただけますと幸いです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Station 12</title> 8 </head> 9 <body> 10 <!-- この<p>の中にレスポンスをコピペする --> 11 <p></p> 12 <button onclick="fetchApi()">リクエスト</button> 13 </body> 14 <script type="text/javascript" src="./scripts/station12-common.js"></script> 15</html> 16
JavaScript
1function fetchApi() { 2 const url = "https://dog.ceo/api/breeds/image/random"; 3 fetch(url) 4 .then(() => console.log("fetch completed")) 5 .catch(() => console.error("fetch failed")); 6} 7
試したこと
レスポンスデータやディペロッパーツールなどで調べましたが答えにたどり着くことができませんでした。
またここで確認すべきというあたりはつけたのですがこれ以上いけませんでした。ご経時いただけますと幸いです。どうぞよろしくお願いいたします。
回答2件
1
javascript
1<script> 2function fetchApi() { 3 const url = "https://dog.ceo/api/breeds/image/random"; 4 fetch(url).then(res=>{ 5 if(res.ok) return res.text(); 6 throw new Error(res.status); 7 }).then(txt=>{ 8 document.querySelector('p').textContent=txt; 9 }).catch(err =>{ 10 console.error(`err:${err}`); 11 }); 12} 13</script> 14<p></p> 15<button onclick="fetchApi()">リクエスト</button>
投稿2023/02/07 00:34
総合スコア109981
0
ベストアンサー
Network パネルの Payload タブか Response タブではないでしょうか。
【DevTools の新機能 (Chrome 96) - Chrome Developers】
https://developer.chrome.com/ja/blog/new-in-devtools-96/#payload
投稿2023/02/06 17:59
総合スコア69098
回答へのコメント
こちらの方法で確認できました！ありがとうございました。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/07 03:48