【前端/js】在控制台将json对象保存至本地

说在前面

• 测试浏览器：chrome 81.0.4
• 原文地址：这里

适用情景

• 当你在浏览器中使用控制台（chrome F12）进行调试时，有时候需要获取某个json对象的详细内容，但是这个json对象太长，直接console.log()打印不全，这时就可以用该方法。

方法

• 进入控制台，切换至source界面
• 设置断点
  在你要获取的数据处设置断点
• 刷新页面
  此时，页面将停止在断点处
• 保存为全局变量
  将鼠标悬停至你想要的数据上，右键并选择Store as global variable
  
  此时，Console窗口将输出为temp1；
  
• 添加save接口
  将下述代码复制到Console窗口 并Enter运行

  (function(console){
   
      console.save = function(data, filename){
   
          if(!data) {
              console.error('Console.save: No data')
              return;
          }
   
          if(!filename) filename = 'console.json'
   
          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
          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)
  

  
• 执行函数
  最后在console窗口运行

  console.save(temp1, "my.json");
  

  将自动下载