Probar etiquetas de JavaScript

Esta guía le acompañará a través del proceso de prueba de etiquetas de JavaScript en su sitio web utilizando una extensión de navegador Chrome antes de implementarlas en producción.

Resumen

Probar las etiquetas de JavaScript antes de la implementación es crucial para asegurar que funcionen correctamente y no interfieran con la funcionalidad de su sitio web. Este método le permite probar las etiquetas de forma segura en su navegador sin realizar cambios en su sitio web en vivo.

Requisitos previos

• Navegador Google Chrome
• Acceso administrativo para instalar extensiones de Chrome
• El código de la etiqueta de JavaScript que desea probar

Guía interactiva

Siga esta guía interactiva para aprender a instalar la extensión del navegador User JavaScript and CSS.

1. Visite la página de la extensión: https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

2. Haga clic en "Get Started" en la guía interactiva de abajo para seguirla.

Guía paso a paso

Siga esta guía paso a paso para obtener instrucciones más detalladas sobre cómo instalar y usar la extensión User JavaScript and CSS.

Paso 1: Instalar la extensión User JavaScript and CSS

1. Abra Google Chrome y navegue a la Chrome Web Store.

2. Vaya a: https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

3. Haga clic en el botón "Add to Chrome".

   Haciendo clic en el botón "Add to Chrome"

4. Cuando se le solicite, haga clic en "Add extension" para confirmar la instalación.

   Haciendo clic en el botón "Add extension"

5. El icono de la extensión debería aparecer ahora en su barra de herramientas de Chrome (es posible que necesite hacer clic en el icono de la pieza de rompecabezas para verlo).

   Localizando la extensión en la barra de herramientas de Chrome

6. Haga clic derecho en el icono de la extensión, o encuéntrelo bajo el icono de la pieza de rompecabezas, luego haga clic en el botón "Manage extension" para abrir la configuración de la extensión.

   Haciendo clic en la acción "Manage extension" en la barra de herramientas de Chrome.

7. En la configuración de la extensión, asegúrese de que la opción "Allow user scripts" esté activada ( ON). Es posible que deba desplazarse hacia abajo en la página de configuración para encontrarla. (Puede cerrar esta pestaña de configuración después de completar este paso).

   Asegurándose de que la configuración "Allow user scripts" esté activada para la extensión.

Paso 2: Acceder a la extensión

1. Navegue al sitio web donde desea probar su etiqueta de JavaScript. Por ejemplo, https://fanplayr.com.

2. Haga clic en el icono de la extensión User JavaScript and CSS en su barra de herramientas de Chrome (es posible que necesite hacer clic en el icono de la pieza de rompecabezas para verlo).

   Haciendo clic en el icono de la extensión en la barra de herramientas de Chrome.

3. El panel de la extensión se abrirá, mostrando una opción para definir una nueva regla para el sitio web.

4. Haga clic en el botón "New Rule". Esto abrirá una nueva pestaña para definir una regla donde puede especificar la etiqueta de JavaScript a inyectar para el sitio web.

   Haciendo clic en el botón "New Rule" en el panel de la extensión.

Paso 3: Añadir su etiqueta de JavaScript

Formato de ejemplo de etiqueta de JavaScript

<script>
  (function (w, d, s) {
    var js = d.createElement(s);
    js.async = true;
    js.src = 'https://cdn.fanplayr.com/....../adaptor.js';
    var fjs = d.getElementsByTagName(s)[0];
    fjs.parentNode.insertBefore(js, fjs);
  })(window, document, 'script');
</script>

TIP

Asegúrese de copiar solo el código JavaScript entre las etiquetas HTML <script> y </script> en la extensión (líneas 2-8 en el ejemplo anterior).

1. Con las opciones de la extensión abiertas, verá un área de texto donde puede introducir código JavaScript.

   Área para pegar código JavaScript.

2. Pegue su código de etiqueta de JavaScript en esta área. Asegúrese de incluir solo código JavaScript, eliminando cualquier <script> de inicio y </script> de cierre si están presentes.

   Pegando el código de la etiqueta de JavaScript en la regla.

3. Haga clic en el botón "Save".

   Haciendo clic en el botón "Save".

Paso 4: Probar la etiqueta de JavaScript

1. Actualice el sitio web donde desea probar su etiqueta de JavaScript.

2. El código JavaScript debería ejecutarse.