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件

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>