Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 10 de 10

Tema: Pedido para todos los novatos: aprendan a utilizar la consola

  1. #1
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,043
    Poder de Reputación
    21

    Lightbulb [Pedido para todos los novatos]: aprendan a utilizar la consola

    Hola:

    Le quiero pedir a todos aquellos que están comenzando y a aquellos que aún no la conocen que, por favor, lean lo siguiente para que aprendan a depurar/limpiar/detectar los posibles errores. De esta forma, cuando tengan que pedir ayuda, no llegarán con preguntas como "No puedo ver las imágenes, ¿que hago?", lo que no esta mal, pues no son expertos, pero la gente del foro no les podrá ayudar con una pregunta tan ambigua.

    Para abrir la consola en:

    - Google Chrome: presionen F12.

    - Firefox: si bien Firefox tiene una consola integrada, no es tan poderosa como Firebug, así que lo primero que deben hacer es instalar el plugin Firebug en Firefox. Una vez instalado, debería aparecer un bicho (como una chinita) de color gris (esquina superior derecha), el cual tendrán que presionar (cuando la consola no esta funcionando no podrán ver ningún error ni advertencia y se darán cuenta que no esta funcionando porque estará de color gris; de lo contrario será de color rojo con negro). Luego de activarlo deben hacer clic con el botón derecho sobre el mismo icono y luego hacer clic sobre Activar todos los paneles. Editado: las herramientas de desarrollo de Firefox a la fecha (15 de Julio de 2014) han progresado bastante, así que el uso de Firebug es completamente opcional.

    Actualizado (diciembre 5, 2014): ahora Firefox no necesita Firebug, pues la consola que incluye por defecto es igual o mejor. Una característica nueva es la posibilidad de ver el sitio web con distintas resoluciones, para los que intentan crear un sitio web responsive.

    - Opera: presionen Control + Shift + i.

    - Safari: existe el plugin Firebug Lite. Es casi igual que las demás herramientas.

    - Internet Explorer 8 (no estoy seguro) y 9 (seguro que sí): F12 (igual que en Google Chrome).

    Ahora que tienen la consola activa podrán ver que esta consola tiene varias pestañas (de hecho, una de ellas se llama console). Por si acaso, para que la consola sirva de algo, deben abrir alguna página web, pues de lo contrario estará vacía :P.

    Las pestañas más importantes son (no nombraré las pestañas de IE porque no estoy usando Windows :P, pero es igual):

    Elements (Google Chrome), Documents (Opera) y HTML (Firefox Firebug): En esta pestaña verán todo el código fuente de manera más ordenada en comparación a si se utiliza la opción de "Ver el código fuente" o Control + U. Además de ver el código HTML (ya procesado, pues nunca podrán ver el código PHP, para ello existen otras alternativas), también podrán hacer cambios al código fuente de manera temporal. Si hacen clic sobre algún elemento (p, a, textarea, etc.), a la derecha podrán ver todos los estilos relacionados con esa etiqueta específica. Estos estilos también se pueden modificar temporalmente y pueden ver los cambios "en vivo", o sea, no tendrán que editar el código fuente, guardar el archivo y recargar la página; ¡Hagan la prueba :P! Seleccionen un elemento y cambien el tamaño de la fuente, el alto, bajo, etc. Editar también significa eliminar, por ende también podrán eliminar una etiqueta completa y podrán ver los resultados en vivo.

    Console (en todos se llama igual): La consola es la que mostrará los errores de archivos no encontrados (como las imágenes; en este caso les mostrará un mensaje como 404 not found y el recurso que no se encontró; hagan la prueba e incluyan una imagen falsa y verán lo que les digo) y es especialmente útil cuando se trabaja con Javascript. Por ejemplo: en lugar de utilizar alert("blah blah blah"); podemos escribir console.log("blah blah blah"); y en lugar de que aparezca una ventana, aparecerá un simple mensaje en la pestaña Console.

    Esas son las pestañas más útiles. El resto también lo son, pero para usuarios con más experiencia (los que entenderán lo que hacen con solo leer el nombre de la pestaña).

    Espero que aprendan a utilizarla, pues les ahorrará mucho tiempo. Con esta herramienta podrían resolver el típico problema de "Mi sitio web se ve bien con Google Chrome, pero no en Firefox u Opera".

    Saludos :).
    Última edición por skaparate; 05/12/2014 a las 16:49 Razón: Correcciones en la información

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Creo que esto debería estar "con chincheta" para que todos lo puedan ver, es un aporte realmente importante

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 mar, 10
    Mensajes
    812
    Poder de Reputación
    16
    como siempre, muy bueno skaparate

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,043
    Poder de Reputación
    21
    Gracias por los comentarios :).

  5. #5
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,701
    Poder de Reputación
    69
    ooooorale esa no me la sabía jejejeje
    yo habia descargado un plugin que me ayudaba con eso!! jeje
    muchas gracias
    ______________________________________

    reparacion de rines


    _____________________________________

  6. #6
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    17 mar, 13
    Mensajes
    1
    Poder de Reputación
    0
    buen aporte gracias

  7. #7
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    02 abr, 13
    Mensajes
    1
    Poder de Reputación
    0
    muy bueno bro me has sacado de muchos apuros con mis codigos javascript.

  8. #8
    Recien Llegado! Merodeador Avatar de juanjose
    Fecha de Ingreso
    06 may, 13
    Mensajes
    4
    Poder de Reputación
    0
    muchas gracias skaparate

  9. #9
    Recien Llegado! Merodeador
    Fecha de Ingreso
    19 jun, 15
    Mensajes
    5
    Poder de Reputación
    0
    Saludos a todos!
    Actualmente estoy trabajando en lo que es Marketing Online y negocios en Línea, mi Mentor hizo un mini curso enseñando a usar varias herramientas, y entre ellas, como utilizar Internet de manera Profesional para expandir NEGOCIOS en INTERNET fácil y muy eficientemente.

    Les dejo el link del mini-entrenamiento.

    https://go.gmshub.com/?lid=28&un=andreame


    Y espero que les pueda ayudar con sus websites.

  10. #10
    Recien Llegado! Merodeador
    Fecha de Ingreso
    20 jun, 15
    Mensajes
    5
    Poder de Reputación
    0
    Me viene de perlas , muchas Gracias, a mi se me complica siempre manejar la consola en los foros. Gracias por el dato

Temas Similares

  1. acuariofilia para novatos
    Por paxarin en el foro Criticamos Tu Web (pero no foros)
    Respuestas: 4
    Último Mensaje: 22/11/2010, 11:11
  2. LA mejor COnsola para vosotros
    Por kAnY en el foro Off-Topic
    Respuestas: 17
    Último Mensaje: 08/11/2008, 23:51
  3. Para los novatos!! .Thanks x la web!! Consultas pls!!
    Por jumocha en el foro Foro General
    Respuestas: 1
    Último Mensaje: 21/11/2006, 14:22

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •