如何在浏览器的控制台中输出json对象，以及添加代码调试。

最新推荐文章于 2023-03-31 11:12:22 发布
最新推荐文章于 2023-03-31 11:12:22 发布
阅读量1.2w 收藏 2
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27435059/article/details/51012773
版权

1.可以使用console.info(data.json);输出json对象data的内容。console.info(data.json)这句话要写在js代码里（温馨提示，IE不能直接使用console）。

2.直接在js代码里添加debugger（后面没有不用添加分号），当程序运行到debugger时，浏览器就会进入调试状态。


StaceyWeiStaceyWei
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Chrome Console 编程小技巧之 01 console.dir(object) 打印指定对象的 JSON 表示
iCloudEnd的博客
01-20 633
01 打印指定对象的 JSON 表示 console.dir(document.head);
在网页上使用 JSON 数据——使用 JSON.parse() 方法将json数据转换为 js对象：
lseap的博客
05-23 479
JSON.parse() JSON 通常用于与服务端交换数据。 在接收服务器数据时一般是字符串。 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。 JSON.parse()使用实例 例如我们从服务器接收了以下数据： { "name":"runoob", "alexa":10000, "site":"www.runoob.com" } 我们使用 JSON.pa...
Chrome显示Json格式数据
qq_44485559的博客
05-29 4551
下面分享一个实用插件，如何安装jsonview插件。安装好jsonview插件以后，浏览器显示json数据就变得可视化了，属于开发利器，学开发的小伙伴一定要试试 1、首先下载插件，下载地址：jsonview 2、然后解压压缩包 3、打开谷歌浏览器的扩展程序界面 4、加载JsonView扩展程序 选中开发者模式，点击【加载已解压的扩展程序…】，选择插件目录 插件安装完成测试输出浏览器如下 以上就是今天分享的内容 ...
redevtools:直接从本地主机使用自定义插件扩展浏览器devtools
05-05
redevtools 直接从本地主机使用自定义插件扩展浏览器devtools： 一些例子： 从控制台浏览和编辑请求 钩住方法并轻松调试它们 将JSON对象转换为TypeScript接口 在页面中显示Web组件及其状态 每个插件都可以在此仓库的plugins目录中找到 入门 步骤1 安装ReDevTools npm install redevtools 此命令仅安装基本工具，不带任何插件（仅几个KB）。 第2步 然后在您的项目中： import { redevtools } from "redevtools" ; redevtools . init ( ) init方法将下载 。 您可以通过键入re.来查看每个可用的插件re. 进入控制台。 ReDevTools是懒惰的：第一次调用插件时，只有这样才能下载该插件。 方法 一些插件是您的源代码类方法的挂钩。 要使您的任何方法
浏览器控制台console里复制json格式数据
狼vs狗
12-25 3007
最近做合同模板，涉及到json数据赋值和回显的需求。有时候特别想再控制台里直接复制粘贴json格式类数据，像Ctrl+C和Ctrl+V这类赋值粘贴。 尝试（可略过） 一开始直接在控制台打印出来（注意：如果想在json前些备注，用console.log(‘示例json：’, json)，别少都逗号，不然json对象会被转换成字符串[object Object]），然后直接选中复制粘贴，发现jso...
f12 chrome 浏览器控制台查看json
jack_rose_me的博客
08-02 3101
console.log(JSON.stringify(data)) 打印[object]类型数据
复制chrome 控制台里面打印的json对象 展开对象
Echo的博客
07-13 1107
一、 var person = { name:'candice' } copy(person) 如果是程序中console.log出来的对象。按照以下步骤操作 右键点击需要处理的对象，会出现Store as global variable，点击 选择之后会发现控制台出现以temp开头的变量 3.执行 copy(变量)。如copy(temp2)。注意是对象，不是字符串。 4.按Crtl+V就会发现对象已经在你的剪切板了。 5.不用担心全局变量占用内存。关闭该网页，自动就清除了。 二、 JS代码
控制台如何输出展开对象详细信息,去掉省略号
星辰的笔记
07-02 2142
我们使用浏览器输出对象的时候，有时候需要一个个点开对象里的属性 像这样 对象属性一多起来就显得很麻烦了，不能直观的看属性值 解决方法： (…) 是 get/set 类的属性，点击后出现的是 当前的值，不一定和你输出 log 的时候是同一个值 如果想要直接看输出时的值（快照） console.log(JSON.parse(JSON.stringify($var))); es6可以直接这样 console.log( { ...$var }) 对象的属性值就会全部展开 ...
javaScript基础入门
echocdzh的博客
12-06 583
javaScript:  js 基于面向对象的一门脚本语言 变量  表达式  分支结构 循环结构  数组  变量类型 函数 javascript与java 两者没有任何关系，名字相似，语法有所相同  javascript:是一种客户端脚本语言 java:是一种服务端语言 基于面向对象 和 面向对象的区别:   基于面向对象是在对象的基础上实现编程，也就
java将json数据格式化输出到控制台
qq_37519791的博客
03-31 1091
【代码】java将json数据格式化输出到控制台。
5种处理js跨域问题方法汇总
01-19
前两天碰到一个跨域问题的处理，...那么调试的时候，在chrome浏览器的控制台会报”Uncaught SyntaxError: Unexpected token”错误；在firefox浏览器的控制台会报”SyntaxError: missing ; before statement”错误。 2.i
关于EasyUI的combobox的data属性以及它的运作过程
热门推荐
become a programmer
05-24 1万+
这几天写代码碰到这个问题，记一下。因为不了解EasyUI的combobox的工作过程，上周星期五，调试了一下午，通过ajax请求 后台成功得到了数据，为什么就不能显示在combobox上，太尼抓狂了。 这个问题和是和combobox的data属性有关，以及valueField 属性有关 一.combobox的data属性     先来说说combobox的data属性。 打
js中动态生成json. 将两层嵌套的json发送给servlet,并在servlet将两层嵌套的json取出
become a programmer
05-31 4333
做导出功能，然互传数据到后台，使用了json。 一.js动态生成json 前端框架用了EasyUI，取当前页面datagrid中的数据 我将datagrid里所有的记录都放到json中，一次性发给后台。 js代码如下： var rows=$("#dg").datagrid('getRows');//取数据 var Js={};//定义一个json对象 for(va
在jsp中引入js文件不成功的原因
become a programmer
05-08 1280
第一：路径错误 第二：js放到了WebContent文件夹之外
js 日期加减
become a programmer
04-19 1068
/** * 日期加减 * @param dayNum 可为负数，为负数时，是减去天数。 * @returns {String} */ function addDate(dayNum){ var now = new Date(); var years = now.getFullYear(); var months = now.getMonth()+1; var days = now...
vscode如何调试JavaScript代码
最新发布
09-24
### 回答1： 如果要调试 JavaScript 代码，可以在 Visual Studio Code 中打开文件夹或者文件，然后按下 F5 键启动调试。 在启动调试之前，你需要先配置一个调试配置文件。可以通过在编辑器中打开调试面板（Ctrl+Shift+D），然后点击左上角的“创建或导入配置”按钮来创建一个新的调试配置文件。 你可以选择 JavaScript 调试器，然后按照提示填写调试配置信息，包括要调试的文件路径、启动命令等。 一旦配置完成，你就可以使用 F5 键启动调试，在代码中设置断点，然后查看调试信息了。 ### 回答2： 在VSCode中调试JavaScript代码可以按照以下步骤进行： 1. 打开VSCode，点击左侧面板上的调试图标（带有一个虫子的图标）或使用快捷键`Ctrl+Shift+D`来切换到调试视图。 2. 在调试视图的顶部，点击配置按钮（齿轮图标）打开调试配置。 3. 如果是首次配置，可以选择一个预设的调试环境。对于JavaScript代码，可以选择Node.js环境。如果没有预设环境，可以选择“添加配置”来手动配置。 4. 在配置文件中，找到"configurations"字段，点击"Add Configuration"来添加调试配置。 5. 在弹出的选择窗口中，选择“Node.js”作为调试环境。 6. 配置完成后，VSCode会自动生成一个名为"launch.json"的文件，里面包含了调试配置信息。在这个文件中，可以修改调试选项，如调试的入口文件、启动参数等。 7. 在配置文件中修改入口文件的路径为需要调试的JavaScript文件路径。可以使用绝对路径或者相对路径。 8. 设置断点：在要调试的JavaScript代码中单击左侧的行号，会出现一个红色的圆圈，表示设置了一个断点。断点用于在调试过程中暂停代码执行。 9. 开始调试：回到调试视图，点击“开始调试”按钮（绿色的播放按钮）或者使用快捷键`F5`开始调试。 10. 当代码执行到设置的断点处时，程序会在那里暂停，此时可以观察变量的值、执行堆栈等调试信息。还可以使用调试控制台输入表达式并查看结果。 11. 调试过程中，可以使用调试控制台中的控制按钮（如暂停、继续、单步执行等）来控制代码的执行。 12. 在调试完成后，可以点击“停止调试”按钮（红色的方块按钮）或者使用快捷键`Shift+F5`结束调试。 通过上述步骤，我们可以在VSCode中方便地进行JavaScript代码的调试，帮助我们更好地理解和解决代码中的问题。 ### 回答3： VS Code是一个功能强大的代码编辑器，也可以使用它来调试JavaScript代码。 以下是在VS Code中调试JavaScript代码的步骤： 1. 安装VS Code：首先，您需要在计算机上安装VS Code。您可以从官方网站(https://code.visualstudio.com/)下载并安装适用于您的操作系统的版本。 2. 打开文件夹：打开VS Code后，选择“文件”>“打开文件夹”选项，然后选择包含您的JavaScript代码的文件夹。 3. 创建调试配置文件：在VS Code中，选择“视图”>“调试”或使用快捷键Ctrl+Shift+D打开调试视图。接下来，单击调试视图中的齿轮图标，这将打开“launch.json”文件。如果没有该文件，它将提示您创建一个新的调试配置文件。 4. 配置调试器：在“launch.json”文件中，您可以选择要使用的调试器。对于JavaScript代码，您可以选择“Node.js”调试器或“Chrome”调试器，具体取决于您的需求。例如，如果您想在浏览器中调试代码，可以选择“Chrome”调试器。 5. 启动调试会话：完成调试配置后，您可以点击调试视图中的“启动调试”按钮，或使用F5键启动调试会话。 6. 设置断点：在代码中选择要设置断点的行，然后运行调试会话。当程序执行到断点时，程序将停止，并允许您逐步检查代码的执行过程。 7. 查看变量和表达式：在调试会话中，您可以查看当前的变量和表达式的值。您可以在调试视图的“变量”或“表达式”部分查看这些信息。 8. 继续执行代码：在检查代码后，您可以选择继续执行剩余的代码，或者使用单步调试命令逐行执行代码。 以上是在VS Code中调试JavaScript代码的基本步骤。通过调试，您可以更轻松地找到和修复代码中的错误，并对代码的执行过程进行深入分析。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值