Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

608
Views
Mensaje de error "DevTools no pudo cargar SourceMap: no se pudo cargar el contenido para chrome-extension://..."

Estoy tratando de mostrar una imagen seleccionada de la máquina local y necesito la ubicación de esa imagen para una función de JavaScript. Pero no puedo obtener la ubicación.

Para obtener la ubicación de la imagen, intenté usar console.log , pero no devolvió nada.

 console.log(document.getElementById("uploadPreview"));

Aquí está el código HTML:

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div align="center" style="padding-top: 50px"> <img align="center" id="uploadPreview" style="width: 100px; height: 100px;" /> </div> <div align="center" style="padding-left: 30px"> <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> </div> <script type="text/javascript"> function PreviewImage() { var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; console.log(document.getElementById("uploadPreview").src); }; } </script> </body> </html>

Salida de la consola:

Ingrese la descripción de la imagen aquí

Aquí está la advertencia:

DevTools no pudo cargar SourceMap: no se pudo cargar el contenido para chrome-extension://alplpnakfeabeiebipdmaenpmbgknjce/include.preload.js.map: error HTTP: código de estado 404, net::ERR_UNKNOWN_URL_SCHEME

over 4 years ago · Santiago Trujillo
14 answers
Answer question

0

Para mí, las advertencias fueron causadas por la extensión Selenium IDE Chrome. Estas advertencias aparecían en la Consola en cada carga de página:

 DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/atoms.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/polyfills.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/escape.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/playback.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/record.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Dado que Selenium IDE ya estaba configurado para poder leer los datos del sitio en todos los sitios, lo desinstalé. (Leí en otro comentario aquí que podría intentar habilitar más permisos para una extensión en lugar de eliminarla). En mi caso, eliminar Selenium IDE (extensión de Chrome) eliminó las advertencias.

over 4 years ago · Santiago Trujillo Report

0

Solo te faltan archivos.

Vaya a este sitio web https://www.cdnpkg.com/ descargue lo que necesita y cópielo en la carpeta correcta.

over 4 years ago · Santiago Trujillo Report

0

También es posible agregar el archivo que falta, además de otras bibliotecas .js en la misma carpeta (no es necesario hacer referencia al .map en el archivo .html, etiqueta <script>).

Tuve el mismo error al intentar codificar en Backbone.js.

El archivo problemático era backbone-min.js y la línea que generó el error fue sourceMappingURL=backbone-min.map .

Después de descargar el archivo faltante (el enlace viene de aquí ), el error desapareció.

over 4 years ago · Santiago Trujillo Report

0

Me topé con esta pregunta de desbordamiento de pila después de descubrir muchos errores de mapas de origen en la consola para el navegador Edge . (Creo que había deshabilitado las advertencias en el navegador Chrome hace mucho tiempo).

Para mí significó primero darme cuenta de qué es un mapa fuente ; consulte la respuesta de Macro Mazzon para comprender esto. Como es una buena idea, solo se trataba de descubrir cómo encenderlos.

Es tan simple como agregar esta línea en su archivo webpack.config.js :

 module.exports = { devtool: "source-map", }

Ahora que Edge pudo detectar un mapa de origen, los errores desaparecieron.

Disculpas si esta respuesta insulta la inteligencia de alguien, pero tal vez alguien que lea esto no tenga ni idea de los mapas de origen como yo.

over 4 years ago · Santiago Trujillo Report

0

Correcto: no tiene nada que ver con tu código. Encontré dos soluciones válidas para esta advertencia (no solo deshabilitarla). Para comprender mejor qué es un mapa de origen , le sugiero que consulte esta respuesta , donde explica cómo es algo que lo ayuda a depurar:

Los archivos .map son para archivos JavaScript y CSS (y ahora también para TypeScript) que se han minimizado. Se llaman SourceMaps. Cuando minimiza un archivo, como el archivo angular.js, toma miles de líneas de código bonito y las convierte en solo unas pocas líneas de código feo. Con suerte, cuando envía su código a producción, está utilizando el código minimizado en lugar de la versión completa sin minimizar. Cuando su aplicación está en producción y tiene un error, el mapa fuente ayudará a tomar su archivo feo y le permitirá ver la versión original del código. Si no tuviera el mapa fuente, entonces cualquier error parecería críptico en el mejor de los casos.

  1. Primera solución : aparentemente, el Sr. Heelis fue el más cercano: debe agregar el archivo .map y hay algunas herramientas que lo ayudan con este problema ( Grunt , Gulp y Google closure , por ejemplo, citando la respuesta). De lo contrario, puede descargar el archivo .map de sitios oficiales como Bootstrap , jQuery , font-awesome , preload , etc. (quizás instalando cosas como popper o swiper con el comando npm en una carpeta aleatoria y copiando solo el archivo .map en su carpeta de destino de JavaScript/CSS)

  2. Segunda solución (la que usé): agregue los archivos fuente usando un CDN (red de entrega de contenido). ( Aquí están todas las ventajas de usar un CDN). Usando la red de entrega de contenido (CDN), simplemente puede agregar el enlace CDN, en lugar de la ruta a su carpeta. Puede encontrar CND en sitios web oficiales ( Bootstrap , jquery , popper , etc.) o puede buscar fácilmente en algunos sitios web como Cloudflare , cdnjs , etc.

over 4 years ago · Santiago Trujillo Report

0

No creo que las advertencias que ha recibido estén relacionadas. Tuve las mismas advertencias que resultaron ser la extensión de Chrome React Dev Tools. Eliminé la extensión y los errores desaparecieron.

over 4 years ago · Santiago Trujillo Report

0

Vaya a Herramientas para desarrolladores → Configuración → Consola → marque "Solo contexto seleccionado" . Las advertencias estarán ocultas. Puedes volver a verlos desmarcando la misma casilla.

"Solo contexto seleccionado" significa solo los contextos superior, iframe, trabajador y extensión. Que es todo lo que necesitará, la gran mayoría de las veces.

over 4 years ago · Santiago Trujillo Report

0

Corrección de los mensajes de error "SourceMap" en la Consola de herramientas de desarrollo causados por las extensiones de Chrome:

Ejemplos provocados por las extensiones de McAfee:

DevTools no pudo cargar SourceMap: no se pudo cargar contenido para la extensión de Chrome: //klekeajafkkpokaofllcadenjdckhinm/sourceMap/content.map: error HTTP: código de estado 404, red::ERR_UNKNOWN_URL_SCHEME

DevTools no pudo cargar SourceMap: no se pudo cargar el contenido para chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: error HTTP: código de estado 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools no pudo cargar SourceMap: no se pudo cargar el contenido para chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: error HTTP: código de estado 404, net::ERR_UNKNOWN_URL_SCHEME

Si está desarrollando , entonces necesita marcar "Habilitar mapas de origen de JavaScript" y "Habilitar mapas de origen de CSS" para poder ver su código fuente en las Herramientas para desarrolladores de Chrome. Desmarcarlos le quita la capacidad de depurar su código fuente. Es como apagar la alarma contra incendios en lugar de apagar el fuego. No quieres hacer eso.

En su lugar, desea encontrar las extensiones que están causando los mensajes y desactivarlas. Así es como lo haces:

  1. Ve a los tres puntos en la esquina superior derecha de Chrome.
  2. Vaya a "Más herramientas" y haga clic en "Extensiones".
  3. Haga esto para una extensión a la vez hasta que no haya más errores de "SourceMap" en la consola:
    1. Apague la extensión deslizando el interruptor hacia la izquierda.
    2. Vuelva a cargar la página en la que estaba usando las herramientas de desarrollo.
    3. Compruebe si alguno de los mensajes de error de "SourceMap" desapareció.
      1. Si alguno lo hizo, entonces esa extensión estaba causando esos mensajes.
      2. De lo contrario, esa extensión se puede volver a activar.

Después de determinar qué extensiones causaron el problema:

  1. Si lo necesita, comuníquese con el fabricante para que solucione el problema.
  2. De lo contrario, elimine la extensión.
over 4 years ago · Santiago Trujillo Report

0

Debe abrir Chrome en modo desarrollador: seleccione Más herramientas , luego Extensiones y seleccione Modo desarrollador

over 4 years ago · Santiago Trujillo Report

0

Las extensiones sin suficientes permisos en Chrome pueden causar estas advertencias, por ejemplo, para las herramientas de desarrollo de React. Compruebe si el siguiente procedimiento resuelve su problema:

  1. Haga clic derecho en el icono de la extensión.

O

  1. Ir a extensiones.
  2. Haga clic en los tres puntos en la fila de la herramienta de desarrollo React.

Luego elija "Esto puede leer y escribir datos del sitio" .

Deberías ver tres opciones en la lista. Elija uno que sea lo suficientemente estricto en función de cuánto confíe en la extensión y que también satisfaga las necesidades de la extensión.

over 4 years ago · Santiago Trujillo Report

0

Para mí, el problema no fue causado por la aplicación en desarrollo en sí, sino por la extensión de Chrome React Developer Tool . Lo resolví parcialmente haciendo clic derecho en el ícono de la extensión en la barra de herramientas, haciendo clic en "Administrar extensión" y luego habilitando "Permitir acceso a URL de archivos". Pero esta medida solucionó solo algunas de las alertas.

Encontré problemas en el repositorio de React que sugieren que la causa es un error en su extensión y está previsto que se corrija pronto; consulte los problemas 20091 y 20075 .

Puede confirmar que está relacionado con la extensión accediendo a su aplicación en una pestaña anónima sin ninguna extensión habilitada.

over 4 years ago · Santiago Trujillo Report

0

Aprecio que esto sea parte de sus extensiones, pero veo este mensaje en todo tipo de lugares en estos días, y lo odio: cómo lo solucioné (esta solución también parece acelerar enormemente el navegador) fue agregando un archivo muerto

  1. cree físicamente el archivo que quiere/donde lo quiere, como un archivo en blanco (por ejemplo, " popper.min.js.map ")

  2. poner esto en el archivo en blanco

     { "version": 1, "mappings": "", "sources": [], "names": [], "file": "popper.min.js" }
  3. asegúrese de que "file": "*******" en el contenido del archivo en blanco coincida con el nombre de su archivo ******.map (menos la palabra ".mapa")

(Sospecho que podría agregar físicamente este método de archivo muerto al complemento usted mismo).

over 4 years ago · Santiago Trujillo Report

0

Eso es porque Chrome agregó soporte para mapas de origen.

Vaya a las herramientas para desarrolladores ( F12 en el navegador), luego seleccione los tres puntos en la esquina superior derecha y vaya a Configuración .

Luego, busque Fuentes y deshabilite las opciones:

  • "Habilitar mapas fuente de JavaScript"
  • "Habilitar mapas de origen CSS"

Si haces eso, eso eliminaría las advertencias. No tiene nada que ver con tu código. Consulte las herramientas de desarrollo en otras páginas y verá la misma advertencia.

over 4 years ago · Santiago Trujillo Report

0

El archivo include.prepload.js tendrá una línea como la siguiente, probablemente como la última línea:

//# sourceMappingURL=include.prepload.js.map

Bórralo y el error desaparecerá.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!