La Consola de herramientas para desarrolladores de Chrome es probablemente una de las herramientas de navegador especializadas más utilizadas y más utilizadas. La consola le da al programador muchas características interesantes. Ayuda a depurar, perfilar y monitorear el código de la página. El material que estamos traduciendo hoy está dedicado a informarle sobre algunas de las características de la consola Chrome que no son tan conocidas como se merecen.
Función de monitor
La función se monitorusa para organizar el monitoreo de otras funciones. En particular, le permite saber cuándo se llamó a una determinada función y con qué parámetros se llamó. Considere un ejemplo (su código se ingresa en la consola de Chrome):function traceFunc (arg) { }
monitor(traceFunc)
La función se traceFuncpasa a la función monitorcomo argumento. Ahora, cuando traceFuncse llama a la función , recibiremos una notificación al respecto (nuevamente, en la consola):traceFunc(90)
function traceFunc was called with arguments: 90
Usando la función de monitorFunción de monitor
La función le unmonitorpermite deshabilitar la supervisión de una función que se supervisó previamente utilizando la función monitor. Para dejar de monitorear la función traceFunc, utilizamos la siguiente construcción:unmonitor(traceFunc)
Si llama después de esto traceFunc, no se mostrarán notificaciones en la consola.traceFunc(90)
Llamar a una función cuya supervisión está deshabilitada no genera información sobre esta llamada a la consolaFunción MonitorEvents
El esquema para usar la función se monitorEventsve así:monitorEvents(object,[,events])
Esta función le permite rastrear la ocurrencia de eventos de objetos y muestra información sobre estos eventos en la consola.Supongamos que hay un botón en la página descrita por el siguiente código:<button id="button">Button</button>
Comencemos a rastrear el evento de clickeste botón:monitorEvents(button, "click")
Si después de comenzar la observación de un evento, clickhaga clic en el botón, se mostrará información sobre el evento en la consola.Haga clic en el botón y comience a monitorear sus eventos.Puede monitorear varios eventos pasandomonitorEventsuna matriz comofunciones delsegundo argumento:monitorEvents(button, ["click", "mouseover"])
Ahora bajo observación están los eventos clicky mouseover. Como resultado, la consola recibe mensajes sobre hacer clic en el botón y que se mantuvo sobre el mouse.Supervisión de eventos de los botones de clic y mouseoverPuede organizar la supervisión de grupos de eventos:monitorEvents(button, ["click", "mouse"])
Una cadena mousees un identificador universal para un grupo de eventos relacionados con el mouse. Por ejemplo - mouseover, mousemove, mouseout. Como es el caso de suscribirse a eventos específicos, suscribirse a un identificador de evento universal resultará en la emisión de notificaciones cuando tales eventos ocurran.Supervisión de eventos de botón relacionados con hacer clic en él y con el mousePor supuesto, la función esmonitorEventsaplicable a otros objetos, y no solo a botones. Lo mismo se aplica a los eventos que se pueden ver con él. Estos no son soloclickeventos del mouse.Función UnmonitorEvents
La función le unmonitorEventspermite cancelar la supervisión de eventos de objeto iniciados por la función monitorEvents.Supongamos que decidimos rastrear los clics de los botones:monitorEvents(button, "click")
Como resultado, cuando se hace clic en el botón, la información sobre estos eventos llega a la consola. Para detener el monitoreo, necesitamos este diseño:unmonitorEvents(button, "click")
Ahora el sistema deja de monitorear el evento del clickbotón.Después de negarse a monitorear los eventos de clic, los informes sobre clics en un botón dejan de llegar a la consola$ _ Construcción
El diseño le $_permite acceder al resultado de la última expresión ejecutada en la consola.Supongamos que ingresamos una expresión en la consola 2 + 2y la ejecutamos. Nos dio 4.Luego entramos y ejecutamos la expresión 3*2. Nos dio 6.Resultó que realizamos dos expresiones, la más reciente de las cuales es 3*2. Si ahora ingresa a la consola $_y haz clic en Enter- se muestra el resultado de la expresión 3*2, es decir - 6.Usando la construcción $ _Función de copia
La función le copypermite copiar los datos transferidos al portapapeles.Ejecutemos, por ejemplo, el siguiente comando:copy("nnamdi")
Esto copiará la línea al portapapeles nnamdi. Para verificar esto, ejecute el comando anterior en la consola y luego intente pegar lo que está en el portapapeles en la barra de direcciones del navegador. Debería obtener algo similar a la siguiente imagen.Software copiando datos al portapapelesFunción clara
La función le clearpermite borrar el historial de ejecución de comandos en la consola. Esta función es útil en los casos en que la consola está llena de varios materiales que se muestran en ella, y desea eliminar de ella todo lo que se muestra en ella.Función de teclas
La función keys(object), como el método Object.keys, devuelve una matriz de claves de propiedad de objeto:const obj = {prop1: 0, prop2: 1, prop3: 2}
keys(obj)
Usando la función de teclasFunción de valores
La función valueses similar a un método Object.values. Devuelve una matriz de valores de propiedad de objeto.const obj = {prop1: 0, prop2: 1, prop3: 2}
values(obj)
Usando la función de valoresFunción GetEventListeners
La función getEventListenersdevuelve información sobre eventos registrados para el objeto. Por ejemplo, si registra ciertos eventos para un botón, la función getEventListenerspasada a este botón devolverá un objeto que contiene, en forma de matrices, una descripción de los eventos del botón.Supongamos que la página tiene este código:<button id="button"
onclick="clickHandler()"
onmousedown="mousedownHandler()"
onmouseover="mouseoverHandler()">
Button
</button>
<script>
function clickHandler() {
}
function mousedownHandler() {
}
function mouseoverHandler() {
}
</script>
Este código describe el botón y tres eventos: click, onmousedown, y onmouseover. Los eventos son controladores asignados clickHandler, mousedownHandlery mouseoverHandler.Llame al siguiente comando en la consola:getEventListeners(button)
Para obtener información sobre el botón controladores de eventosUn objeto, emitida después de la ordengetEventListeners(button), propiedades disponiblesclick,mousedownymouseovercuyos nombres coincidan con los nombres de los controladores de eventos que asignan un botón. Las propiedades contienen matrices de objetos que contienen información detallada sobre eventos.Función $
La función $devuelve el primero de los elementos DOM que coinciden con el selector que se le pasó. El diagrama de llamada de función se ve así:$(elementName, [,node])
Supongamos que la página tiene el siguiente código:<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
Este código describe cuatro botones.Ejecutemos el siguiente comando:$("button")
A continuación se muestra lo que ingresa a la consola después de su ejecución.El resultado delcomando $ ("botón")Button1 .Como puede ver, el comando devolvió un botón. Este botón es el primer elementobuttondel documento. Después de tener a nuestra disposición un nodo DOM de un elemento, podemos referirnos a sus propiedades y métodos.Por ejemplo, para encontrar el identificador de un botón, puede usar esta construcción:$("button").id
Aclaración del identificador del botónUsando la función$, puede especificar el nodo DOM, el primer elemento en el que estamos interesados.Supongamos botonesButton2,Button3yButton4del ejemplo anterior se colocan en un elemento<div>:<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>
Para seleccionar el primer botón de los que están anidados <div>, puede usar el siguiente comando:$("button", document.querySelector("div"))
Acceso a un elemento anidado en otro elementoComo puede ver, ahora$devuelve un botónButton2, ya que este es el primer elementobuttonanidado en el elemento<div>Función $$
La función $$funciona igual que la función anterior $. Pero devuelve todos los elementos coincidentes. Se llama así:$$(element, [,node])
Supongamos que hay cuatro botones en una página, como en los ejemplos anteriores.Llame al siguiente comando:$$("button")
Uso de la función $$Después de la llamada$$, como se ve en la figura anterior, tenemos a nuestra disposición una serie de elementosbutton.Los elementos también se pueden seleccionar del especificado cuando$$sellama alnodo DOM. Por ejemplo, si una página tiene varios botones encerrados<div>, podemos, para seleccionar todos estos botones, usar este diseño:$$("button", document.querySelector("div"))
Usar la función $$ para seleccionar elementos anidados en otro elementoResumen
La consola de Chrome es una herramienta útil. A medida que las nuevas versiones de Chrome están disponibles, las capacidades de su consola se expanden. Por lo tanto, es útil mirar periódicamente aquí en busca de algo nuevo e interesante.¡Queridos lectores! ¿Qué herramientas de la consola de Chrome utilizas con más frecuencia?