Chrome 開發者工具是 web 開發者必備的工具之一，它不僅可以幫助開發者調試代碼，還可以幫助開發者優化和分析網站性能。其中一個很重要的功能是查看和編輯 JSON 數據。

// 在 Chrome 開發者工具中找到 Network 選項卡，可以看到當前網頁所請求的所有資源
// 選取一個請求，將 Preview 選項卡切換到 Response 分欄，可以看到響應體中的 JSON 數據
{
"name": "小明",
"age": 25,
"hobbies": ["游泳", "跑步", "旅游"],
"contact": {
"email": "xiaoming@example.com",
"phone": "123456789"
}
}

可以通過 Chrome 開發者工具的 Elements 選項卡，以及 Console 選項卡，將 JSON 數據輸出到控制臺中。這對于開發中需要調試 JSON 數據時非常方便。

// 在 Elements 選項卡中，選取一個包含 JSON 數據的元素，例如一個隱藏的 input 標簽
// 在 Console 選項卡中執行以下代碼，可以將 JSON 數據打印出來
const jsonStr = document.querySelector('input[type=hidden]').value;
console.log(JSON.parse(jsonStr));

對于需要編輯 JSON 數據的情況，Chrome 開發者工具也提供了非常便利的功能。在 Sources 選項卡中，找到對應的 JSON 文件，可以對其進行編輯和保存。

// 在 Sources 選項卡中找到對應的 JSON 文件，可以直接對其進行編輯
// 編輯完成后，可以保存并應用修改
// 注意：修改后的 JSON 數據可能會直接影響網站的行為，一定要謹慎操作

總的來說，Chrome 開發者工具提供了非常豐富的 JSON 數據處理功能，對于 web 開發者來說是非常實用的工具。