Как получить доступ к данным JSON, полученным сторонним API в консоли Google Chrome?

Question

Мой веб-сайт использует сторонний API погоды, который возвращает данные JSON, как показано ниже.

{
"locations": "NYC", 
"temperature":"100"
...
}

Я пытаюсь проверить логику, созданную на консоли Google Chrome Dev.Чтобы сделать это, я сначала знаю, как получить доступ к данным JSON в консоли, но не могу понять, где эти данные сохранены.Я попытался заглянуть в localStorage, но мне не повезло.

Может ли кто-нибудь подсказать мне, как я могу получить доступ к этим данным JSON в консоли Chrome?По сути, я пытаюсь увидеть, где этот JSON сохраняется под каким объектом.

Спасибо

Answer 1

Количество ответов слишком низкое, поэтому я не могу комментировать другой ответ.

Но вы можете просто скопировать данные json, которые вы найдете на вкладке сети, и вставить их в область консоли инструмента разработчика.Просто делайте то, что вы обычно делаете, как const test = (your pasted JSON).тогда вы можете получить к нему доступ через test.whatever.

Answer 2

Попробуйте запустить этот код на своей консоли и сохранить переменную данных json как data: console.save (data)

(function(console){

    console.save = function(data, filename){

        console.log('data is '+data);
        if(!data) {
            console.error('Console.save: No data')
            return;
        }

        if(!filename) filename = 'console'

        if(typeof data === "object"){
            data = JSON.stringify(data, undefined, 4)
        }

        var blob = new Blob([data], {type: 'text/json'}),
            e    = document.createEvent('MouseEvents'),
            a    = document.createElement('a')

        a.download = filename+ '.json'
        a.href = window.URL.createObjectURL(blob)
        a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
        e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
        a.dispatchEvent(e)
    }
})(console)

Answer 3

В Chrome Dev Tools перейдите на вкладку Сеть.Оттуда вы можете настроить запись всех загруженных ресурсов, включая вызовы XMLHttp (AJAX), например, вызов вашего API.

Когда ответ JSON вернется, вы сможете просмотреть его здесь.Вложенная вкладка Preview при нажатии на запрос будет содержать «довольно печатную» версию JSON.Вложенная вкладка Response будет содержать необработанный ответ.Вы можете также просмотреть заголовки, которые были отправлены и получены, воспроизвести запрос XHR и т. Д.1014 * исследовать данные в консоли, добавляя их в глобальное пространство имен.Пожалуйста, не забудьте удалить это из своего кода в производственном процессе, так как это плохая практика - загрязнять глобальное пространство имен.Кроме этого, получайте удовольствие!Инструменты разработчика - один из самых острых ножей в арсенале веб-разработчика.

var startTime = new Date().getTime();

// Create temporary global
writeLog('Creating temp global variable', 'msg-info');
var myData = null;

// Fetch options
writeLog('Defining fetch options', 'msg-info');
let options = {
  method: 'GET'
};

// Make AJAX call. When complete, the temporary global will
// be populated with your JSON data.
writeLog('Making AJAX fetch call', 'msg-info');
fetch('https://jsonplaceholder.typicode.com/todos/1', options)
  .then(function(response) {
    if (!response.ok) {
      writeLog('HTTP ERROR RECEIVED:' + response.status, 'msg-error');
      throw new Error('HTTP error, status = ' + response.status);
    }
    writeLog('JSON Response received', 'msg-info');
    return response.json();
  })
  .then(function(jsonData) {
    writeLog('Assigning JSON to global variable', 'msg-info');
    window.myData = jsonData;
    writeLog('Call Successful! Data ready to be accessed in Chrome Dev Console!', 'msg-success');
    document.getElementById("rawData").innerHTML = JSON.stringify(jsonData, undefined, 2);
  });

// Logging function
function writeLog(msg, className) {
  var node = document.createElement('li');
  if (className.length > 0) {
    node.className = className;
  }
  var currentTime = new Date().getTime();
  var elapsedTime = currentTime - startTime;
  var textNode = document.createTextNode(msg + ' [' + elapsedTime + ' ms]');
  node.appendChild(textNode);
  document.getElementById('log').appendChild(node);
  startTime = currentTime;
}

code {
  color: green;
  font-weight: bold;
  border: 1px solid green;
  padding: 3px;
}

h4 {
  border-bottom: 1px solid #AAA;
  background-color: #333;
  padding: 5px;
  color: #FFF;
  margin-top: 10px;
}

#log li {
  font-weight: bold;
}

.msg-info {
  color: #007cff;
}

.msg-error {
  color: red;
}

.msg-success {
  color: green;
}

#rawData {
  color: red !important;
}

  Client Side API Call Test
  When the call returns, you may use the developer console to interact with the response stored in a global variable myData
  LIVE REQUEST LOG:
  
  RAW DATA PREVIEW:
  

ПРИМЕР ИСПОЛЬЗОВАНИЯ КОНСОЛИ ХРОМОВ

Попробуйте ввести это в консоли после символа карата: myData.title.Или вы можете просто набрать myData, чтобы увидеть весь объект JSON.

Ссылка: https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#response