React Hooks调试疑问：console.log被Hook错误覆盖及执行顺序问题

1. 为什么console.log没被执行？ #

这是ES模块的静态import提升机制导致的——虽然你把console.log('index.js')写在了import语句前面，但ES模块的import会在模块内所有代码执行之前，被优先解析和加载。

简单来说，浏览器/webpack处理你的index.js时，会先去加载containers/app模块，而在加载App组件的过程中，立刻触发了Hook调用错误（Uncaught Invariant Violation: Invalid hook call），这个错误直接中断了整个模块的执行流程，导致后面的console.log根本没机会运行。

哪怕App是异步组件，只要你用的是静态import语法，它的加载解析依然会优先于模块内的同步代码，所以你的日志永远没机会输出。

2. 怎么在这种场景下用console.log调试？ #

这里有几个实用的调试方案：

• 把调试日志放到前置模块：
  创建一个单独的debug.js文件，内容只放日志：

  console.log('index.js 前置调试日志');
  

  然后在index.js最顶部先导入这个模块：

  import './debug.js';
  import App from 'containers/app';
  import React from 'react';
  import { render } from 'react-dom';
  
  render(<App/>, document.getElementById('app'));
  

  模块加载是按顺序执行的，debug.js会先被执行，日志能正常输出，之后才会加载App组件触发错误。

• 利用Chrome DevTools断点功能：
  打开Chrome控制台的Sources面板，勾选「Pause on exceptions」（暂停在异常处），刷新页面。当Hook错误触发时，DevTools会暂停在错误发生的位置，你可以查看调用栈，也可以手动在console.log行添加断点，确认代码是否走到了这里。

• 在App组件内部加前置日志：
  如果怀疑是App组件加载时就出错，可以在App组件的最顶部（任何Hook调用之前）添加console.log('App组件开始加载')，这样能快速定位错误是不是在组件初始化阶段触发的。

3. 关于第一个场景的页面白屏 #

第一个场景里只写console.log却白屏是正常现象——因为你没有任何代码把内容渲染到DOM的app节点中，浏览器没有可展示的内容，自然显示空白；而控制台日志正常输出，说明你的代码确实被执行了。

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