Hola a todas las personas curiosas que buscan información interesante y consejos sobre cómo ejecutar JavaScript en las herramientas de desarrollo de Chrome.
Es obvio que cada navegador moderno tiene herramientas de desarrollo integradas con la ayuda de las cuales puede detectar y corregir rápidamente errores en el marcado o en el código. Por ejemplo, una empresa de desarrollo de aplicaciones móviles enfatiza que gracias a esas habilidades, puede encontrar descubra cómo se construyó el árbol DOM, qué etiquetas y atributos hay en la página, por qué no se cargaron las fuentes y mucho más. Además, al usar JavaScript en las páginas de Internet, puede mostrar algunos elementos. Los ejemplos populares incluyen formularios de entrada de datos, menús desplegables, visualización de fotos en una ventana separada y muchos otros casos.
En este artículo, repasaré las características básicas de Chrome DevTools y le diré cómo ejecutar JavaScript aquí, para que pueda comprender fácilmente y poseer toda la información de manera eficiente y rápida.
¿Qué es Chrome DevTools?
Herramientas para desarrolladores de Chrome
es una colección integrada de herramientas para desarrolladores web en el navegador Google Chrome. DevTools lo ayuda fácilmente a editar páginas web de inmediato e identificar errores e inconvenientes de la manera más rápida posible, lo que definitivamente es beneficioso para que pueda crear y diseñar mejores sitios web, más rápido. Con su ayuda, puede ver y depurar el HTML del sitio, su CSS y JavaScript. También puede verificar el tráfico de red consumido por el sitio, su velocidad y muchos otros parámetros.
¿Por qué debería usar Chrome DevTools?
Todo pasa. Los problemas pueden ser diferentes, como cuando el código escrito sin razón se niega a funcionar. Es por eso que para comprender rápidamente la causa, corregir la situación, descubrir qué es un problema de código y cómo resolverlo de manera efectiva, debe dominar un conjunto de herramientas. Para estos casos nos resulta muy útil utilizar Chrome DevTools, que es una de las herramientas más potentes para desarrolladores web.
¿Para quién será útil?
Para cada persona interesada e involucrada en el desarrollo web y preocupada por su efectividad. Sin duda, es una lectura obligada para los desarrolladores principiantes. Ciertamente estoy convencido de que todos los lectores podrán encontrar algo nuevo y útil en este artículo, independientemente de su experiencia en el desarrollo.
En primer lugar, antes de utilizar los conocimientos adquiridos sobre cómo ejecutar JavaScript en las herramientas de desarrollo de Chrome, debe recordar cómo usarlo en general. En caso de que quiera hacerlo profesionalmente bien o tenga algunas dificultades o incluso no comprenda claramente toda la situación, debe contratar a un desarrollador de JavaScript.
Cómo habilitar la compatibilidad con JavaScript en el navegador:
- Abra el navegador Chrome en su computadora.
- En la esquina superior derecha, haz clic en Más configuraciones.
- En la parte inferior de la página, seleccione Avanzado.
- En la sección Privacidad y seguridad, haga clic en Configuración de contenido.
- Seleccione JavaScript.
- Coloque el interruptor en la posición Habilitado (recomendado).
¿Cómo abrir DevTools y qué puedes hacer con la ayuda de JavaScript?
De acuerdo con el hecho de que muchos usuarios desean un acceso rápido a diferentes partes de la interfaz de usuario de DevTools, hay muchas formas de abrirlo. Si estamos hablando de cómo ejecutar JavaScript, debe presionar Comando+Opción+J en Mac o ctrl+shift+J en Windows para ir directamente al panel de la Consola.
1. Cuando abra el panel Consola, haga clic inmediatamente en la pestaña FUENTE. En el panel FUENTE verás 3 partes. Están:
- La lista de archivos. En esa pestaña puede ver todos los archivos necesarios que se solicitan.
- La ficha informativa. Cuando se seleccionan los archivos, la información y la trama del archivo se describen allí.
- La pestaña JavaScript. Una gran variedad de instrumentos para observar y probar el Guión. Si tu pantalla de DevTools es amplia, estará situada a la derecha de la pestaña informativa.
2.Luego regrese a la Consola. Aquí puede crear o cambiar una página, es realmente importante escribir y probar declaraciones en la Consola para cambiar la apariencia de la página. Escribe:
document.getElementById(hola).textContent = Hola, Consola. Comience a observar y estimar los siguientes resultados. Intenta observar cómo cambia el texto dentro del botón.
3. De vez en cuando puede haber causas por las que necesite probar códigos desconocidos y ver cómo funcionan. La Consola es el lugar perfecto para probar y hacer algunos experimentos con cualquier código Javascript.
4. Reproducir un error es el primer paso de la depuración, es decir, detectar una serie de acciones que conducen a su aparición. Debe hacer clic en ABRIR DEMO. Luego ingrese cualquier número que desee como 3 en el cuadro de texto Número 1. En el siguiente cuadro de texto 2 ingrese otro número que desee como 4. Agregue estos números para observar los resultados. Ha demostrado que 3+4= 34, eso significa la respuesta incorrecta y este es un error que vas a corregir. Para corregir los errores, debe usar la consola con la ayuda de JavaScript. Estas cosas son realmente difíciles y tal vez sería una buena idea contratar a un desarrollador de JavaScript.
Además, hay otras formas de ejecutar fragmentos de JavaScript con Chrome Dev Tools:
El primer paso para abrir las herramientas de desarrollo en Chrome: Presione comando+opción+J (en MacBooks) y ctrl+shift+J (en no Mac)
El segundo paso para hacer clic en el botón llamado fuente para abrir un panel, por lo que también se abrirá la subpestaña.
El tercero para elegir más pestañas y hacer clic en un fragmento.
El cuarto piensa en el nombre que le darás a tu fragmento.
Los cinco comienzan a escribir su propio código, como lo hace en Consola.
El sexto Si ha hecho todo, haga clic en el botón Ejecutar (>). Puede establecer puntos de interrupción en fragmentos y depurarlos como scripts normales.
Puede usar el fragmento escribiendo ctrl+enter o command+enter.
Además, puede tener acceso al código directamente desde la consola. Como resultado, si alguna vez necesita escribir el código, definitivamente puede usar su fragmento.
Conclusión
Gracias al desarrollo, la tecnología se está moviendo rápidamente y ni siquiera podemos imaginar cuán progresiva es. Hay navegadores que tienen muchas características maravillosas e increíblemente útiles que pueden ser utilizadas por desarrolladores experimentados y principiantes. Uno de los mejores ejemplos son las herramientas para desarrolladores de Chrome, una colección integrada de herramientas para desarrolladores web en el navegador Google Chrome. Aquí hay muchas oportunidades, como una explicación inmediata de la causa, formas de corregir la situación, una investigación de lo que ha causado un problema y cómo resolverlo de manera efectiva. Además, hay muchas formas de ejecutar JavaScript en las herramientas para desarrolladores de Chrome, que se detallan más arriba. Como consecuencia, decida que durante su trabajo, lamentablemente, puede cometer errores, por lo que le recomiendo que contrate a un desarrollador de JavaScript para que su trabajo sea más fácil y agradable.
¿Cómo ejecuto JavaScript?
Para ejecutar JavaScript en un navegador, tiene dos opciones: colocarlo dentro de un elemento de secuencia de comandos en cualquier lugar dentro de un documento HTML, o colocarlo dentro de un archivo JavaScript externo (con una extensión .js) y luego hacer referencia a ese archivo dentro del documento HTML usando un elemento de secuencia de comandos vacío con un atributo src.
¿Cómo inicio JavaScript en mi navegador?
Para ejecutar JavaScript en un navegador,
- Abra su navegador favorito (aquí usaremos Google Chrome).
- Abra las herramientas de desarrollo haciendo clic derecho en un área vacía y seleccione Inspeccionar. Atajo: F12. Inspeccionar navegador.
- En las herramientas para desarrolladores, vaya a la pestaña de la consola. Luego, escriba el código JavaScript y presione enter para ejecutar el código.
¿Cómo habilito la consola de JavaScript en Chrome?
Presione Comando+Opción+J (Mac) o Control+Mayús+J (Windows, Linux, ChromeOS) para abrir la Consola, justo aquí en esta misma página.
¿Cómo ejecuto un archivo JavaScript en las herramientas para desarrolladores de Chrome?
# Ejecutar un fragmento con el menú de comandos
- Enfoca tu cursor en algún lugar dentro de DevTools.
- Presione Control+O o Comando+O (Mac) para abrir el menú de comandos.
- Escribe el ! carácter seguido del nombre del Snippet que desea ejecutar. Figura 10. Ejecución de un fragmento desde el menú de comandos.
- Presione Entrar para ejecutar el Fragmento.