Como老婆del front-end de zapatos para niños, creo que debes estar familiarizada con el navegador Chrome.调页面,写BUG ,画样式y看php片, el mundo entero sería inútil sin él.
¿No lo crees? Veamos qué tan poderosas son nuestras老婆...
Al depurar conjuntamente la interfaz de back-end o solucionar errores en línea, a menudo les escucha decir esta frase: Intente realizar otra solicitud y. ¡Déjame ver por qué ocurrió el error!
Existe una forma ridículamente sencilla de reenviar la solicitud.
Seleccione Network
haga clic en Fetch/XHR
seleccione la solicitud para reenviar,
haga clic derecho y seleccione Replay XHR
No es necesario actualizar la página ni interactuar con ella. ! !
el escenario de iniciar rápidamente una solicitud en la consola o depurar conjuntamente o corregir errores, para la misma solicitud, a veces es necesario modificar los parámetros de entrada y reiniciar.
Seleccione Network
haga clic en Fetch/XHR
seleccione Copy as fetch
consola de recuperación, pegue el código
para modificar los parámetros y presione Entrar para finalizar.
En el pasado, siempre lo solucioné cambiando el código o escribiendo fetch a mano. Fue realmente estúpido pensar en ello...
si calcula su código, generará un objeto complejo . y es necesario copiarlo y enviarlo a otras personas, ¿qué debo hacer?
Utilice la función copy para ejecutar对象como parámetro de entrada
En el pasado, siempre lo imprimía en la consola a través de JSON.stringify(fetfishObj, null, 2) y luego lo copiaba y pegaba manualmente. Esto era realmente ineficiente...
al depurar la página web Después de seleccionar un elemento en el panel Elements , ¿qué sucede si desea conocer algunos de sus atributos, como宽,高,位置, etc., a través de JS ?
Seleccione el elemento a depurar a través de Elements
y acceda a la consola directamente con $0
Ocasionalmente necesitaremos tomar una captura de pantalla de una página web. Las capturas de pantalla integradas del sistema o las capturas de pantalla de WeChat están bien, pero es necesario capturar contenido que exceda. una pantalla ¿Qué hacer ?
Prepare el contenido que se debe tomar.
cmd + shift + p Ejecute el comando Command
e ingrese Capture full size screenshot y presione Entrar.
¿Qué pasa si quieres interceptar algunos elementos seleccionados?
La respuesta también es muy simple. En el tercer paso, ingrese Capture node screenshot
. Al depurar elementos, ¿a menudo los expande uno por uno para depurarlos cuando el nivel es relativamente profundo? Hay una forma más rápida
de mantener presionada la tecla opt + hacer clic (el elemento más externo que debe expandirse)
para ver este escenario. Supongo que debe haberlo encontrado. Se han realizado varios procesos en una determinada cadena y luego queremos saber los resultados de cada paso de ejecución. ¿Qué debemos hacer? .
'fatfish'.split('').reverse().join('') // hsiftaf, puedes hacer esto
// Paso 1 'fatfish'.split('') // ['f', 'a ', 't', 'f', 'i', 's', 'h']
// Paso 2 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', ' i ', 'f', 't', 'a', 'f']
// Paso 3 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf 
Una forma más sencilla es
usar $_ para hacer referencia al resultado de la operación anterior sin copiarlo cada vez
// Paso 1 'fatfish'.split('') // ['f', 'a', 't', ' pez']
// Paso 2 $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// Paso 3 $_.join('') // hsiftaf
A algunos estudiantes les gusta el tema blanco de Chrome y a otros les gusta el negro. Podemos usar teclas de acceso directo para cambiar rápidamente entre los dos temas.
cmd + shift + p ejecuta el comando Command
e ingresa Switch to dark theme o Switch to light theme para cambiar el tema.
$ " y " $$ "son el requisito más común para usar document.querySelector y document.querySelectorAll en la consola para seleccionar elementos de la página actual, pero en realidad es demasiado largo. Podemos usar $ y $$ sustituto.
$i Instale el paquete npm directamente en la consola. ¿Alguna vez se ha encontrado con este escenario? A veces quiero usar una API como dayjs o lodash , pero no quiero ir al sitio web oficial para verificarla. Sería bueno poder probarla directamente en la consola.
Console Importer es un complemento de este tipo que se utiliza para instalar paquetes npm directamente en la consola.
Instale Console Importer
$i('nombre') para instalar el paquete npm
Supongamos que existe el siguiente código. Esperamos que el punto de interrupción se active cuando el nombre del alimento sea ? ¿cómo podemos hacerlo?
alimentos constantes = [
{
nombre: '?',
precio: 10
},
{
nombre: '?',
Precio: 15
},
{
nombre: '?',
Precio: 20
},
]
alimentos.paraCada((v) => {
console.log(v.nombre, v.precio)
}) Esto es muy conveniente cuando se utiliza una gran cantidad de datos y solo se quiere romper la condición cuando se cumple la condición. Imagínese si no hay puntos de interrupción condicionales, ¿necesitamos hacer clic en el depurador n veces?
(Aprender a compartir videos: desarrollo web front-end, video de conceptos básicos de programación)
Los anteriores son los detalles de 11 habilidades de depuración de Chrome que pueden mejorar la eficiencia. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.