13. 错误处理与调试：console、try/catch、边界判断

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

输入 JSON

三、知识点提醒

错误信息要尽可能告诉你“哪里错了”。
`console.table()` 很适合查看数组对象。
`try/catch` 不应吞掉错误，而应该给用户或开发者清晰反馈。

四、练习建议

输入错误 JSON 测试报错。
增加 category 字段的校验。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/13-error-debug.js，下面同步展示，方便学习和复制。

// 页面 13：错误处理、调试输出、JSON 解析
const jsonInput = document.querySelector('#p13-json');
const parseBtn = document.querySelector('#p13-parse');
const debugOutput = document.querySelector('#p13-output');

function parseProductJson(rawJson) {
  if (!rawJson.trim()) {
    throw new Error('JSON 内容不能为空');
  }

  const data = JSON.parse(rawJson);

  if (!data.name) {
    throw new Error('缺少 name 字段');
  }

  if (typeof data.price !== 'number') {
    throw new Error('price 必须是数字');
  }

  return data;
}

parseBtn.addEventListener('click', () => {
  try {
    const product = parseProductJson(jsonInput.value);
    console.log('解析成功：', product);
    console.table([product]);
    debugOutput.textContent = `解析成功：\n名称：${product.name}\n价格：$${product.price}`;
  } catch (error) {
    console.error(error);
    debugOutput.textContent = `解析失败：${error.message}`;
  }
});