如何在Chrome控制台显示JavaScript隐藏错误？调试应用时无法查看错误求设置帮助

Hey there! Let’s walk through how to get Chrome’s dev tools showing every error you need—no more missing those critical clues.

First, let’s make sure your Chrome DevTools are configured to display errors in the first place:

• Open DevTools: Hit F12, right-click anywhere on the page and select Inspect, or use the keyboard shortcuts Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac).
• Switch to the Console panel: This is your primary hub for viewing errors, warnings, and logs.
• Check Console filters:
  • Make sure the All tab is selected at the top (not just Info or Warnings—this ensures you don’t filter out errors by accident).
  • Click the funnel icon (filter button) next to the tabs, and ensure Errors is checked. Uncheck any options like Hide network errors if you need to see HTTP request failures.
  • Toggle on Preserve log (the checkbox at the top of the Console). This keeps errors visible even when the page refreshes or navigates away—super helpful for one-time load errors.
  • If your app uses iframes or multiple contexts, uncheck Selected context only (under the funnel menu) to avoid filtering out errors from other parts of the app.

Sometimes errors get hidden by Promise handling, try/catch blocks, or browser defaults. Here’s how to uncover them:

1. Show Uncaught Promise Rejections #

Chrome doesn’t always log unhandled Promise rejections by default. Fix this:

• Click the gear icon (Settings) in the top-right corner of DevTools.
• Navigate to the Console section.
• Check both Log uncaught promise rejections and Show promise rejection stack traces to get full details on failed Promises.

2. Expose Errors Caught by try/catch #

If your code uses try/catch but doesn’t log the error, Chrome won’t show it. To catch these:

• Switch to the Sources panel.
• Look for the pause button (⏸️) in the top-left corner. Click the small dropdown arrow next to it and select Pause on caught exceptions. Now, whenever an error is caught by a try/catch block, the debugger will pause, letting you inspect the error and call stack.

3. Unhide Errors from Ignored Scripts #

Chrome automatically ignores errors from some third-party scripts (like CDNs) by default. To see these:

• In DevTools Settings (gear icon), go to the Debugger section.
• Under Ignore list, uncheck any entries for scripts you want to debug. Alternatively, in the Sources panel, right-click a script in the file tree and select Unignore script if it was added to the ignore list.

4. View CORS Error Details #

Cross-origin script errors often get truncated by Chrome. To see full details:

• In Console Settings, check Show CORS error details (under the Console section) to get the full context on cross-origin failures.

Hope these steps help you track down those elusive errors! If you run into any specific edge cases, feel free to follow up.

内容的提问来源于stack exchange，提问作者HKI345