Cuando console.log() , la consola de Chrome proporciona el registro, pero en lugar de mostrar el archivo y el número de línea, solo dice react_devtools_backend.js:4049 . ¿Cómo hago para que la consola muestre el archivo y el número de línea cuando hago console.log() ?

Esto puede suceder si está utilizando la extensión React devtools en Chrome. simplemente vaya a chrome://extensions/ y verifique, si lo encuentra, elimínelo. En mi caso funcionó.
Para agregar un poco más de contexto, aparentemente "no necesita una solución", ya que funciona según lo previsto según la versión 18 del 1 de septiembre de 2021. Vea el comentario de uno de los desarrolladores sobre el problema de React GitHub.
Citando aquí en caso de que no desee verificar el registro o se elimine:
A partir del lanzamiento de la versión 18, DevTools siempre anula la consola nativa para atenuar o suprimir el registro doble de StrictMode. (Antes solo lo hacía si habilitaba una función como pilas de componentes).
El principal inconveniente desafortunado de esta anulación es que cambia la ubicación que muestra la consola del navegador, como se informa en este número.
Así que supongo que hasta que cambien de opinión o los navegadores brinden un mejor soporte, es hora de desactivar la extensión.
Pude arreglarlo en mi consola agregando el archivo a mi lista de ignorados de Framework en Chrome. Pasos:
Consola -> Icono de engranaje (arriba a la derecha) -> Configuración -> Lista de ignorados de Framework.
Agregue react_devtools_backend.js a la lista y console.log debería comenzar a mostrar la asignación correcta nuevamente.
Nosotros podemos usar
console.info(data)en lugar de
console.log(data)A partir de la versión 19 de React DevTools del 29 de septiembre de 2021, este problema se ha solucionado, según el comentario en la página de problemas de GitHub . Por lo tanto, debería mostrar el archivo y el número de línea nuevamente después de que actualicemos la extensión React DevTools a la versión 4.19.0 .
Esto puede deberse a que la opción de mapa de origen está deshabilitada en el archivo de configuración del paquete web. Debe cambiar su herramienta de desarrollo en la configuración del paquete web como
devtool: "source-map"o puede controlar la generación de mapas de origen según sus necesidades. verifique la documentación del paquete web devtool
Tengo el mismo problema desde ayer tanto en Edge como en Chrome, no es exactamente una solución, solo una solución temporal: simplemente deshabilite la extensión react-devtools de las extensiones de su navegador.
Deshabilite la extensión React Devtools en su navegador.
Parece que esa extensión necesita una solución.