Sugerencias para la depuración de front-end

¡Acostúmbrate a escribir juntos! Este es el día 13 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de abril", haga clic para ver los detalles del evento .

Después de leer este artículo, aprenderá otras habilidades de depuración además de console.log~

1. ¿Cómo localizar rápidamente problemas en línea?

Después del trabajo, a menudo necesitamos localizar problemas en línea que no se pueden reproducir localmente.

Presentaré dos métodos a mis amigos para localizar:

Método 1: Uso$0.__vue__

paso:

1. En primer lugar, debe seleccionar el div más externo del componente vue que desea ver en el "elemento".Por ejemplo, el div más externo de mi componente es refi-optionsun div de clase, selecciónelo;

2. Luego escriba en la consola $0.__vue__;
3. En este momento, se imprimirá cierta información de datos en el componente (se pueden ver datos, calculados, métodos);

4. También puede activar algunas funciones mediante fetch.

Método 2: Abra vue devtool en el entorno en línea

Además del método anterior, hay una mejor manera de abrir temporalmente la herramienta de desarrollo vue en línea.

var Vue, walker, node;
walker = document.createTreeWalker(document.body,1);
while ((node = walker.nextNode())) {
  if (node.__vue__) {
    Vue = node.__vue__.$options._base;
    if (!Vue.config.devtools) {
      Vue.config.devtools = true;
      if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
        window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);
        console.log("==> vue devtools now is enabled");
      }
    }
    break;
  }
}
复制代码

¡Copie este código en la consola para ejecutarlo, de modo que aparezca vue devtool! (A veces puede haber un retraso y la página se actualizará o la consola aparecerá después de reiniciar)

二, depurador

Puedes reproducir el depurador en el código.

Alcance un punto de interrupción en el código, como se muestra en la figura:

Con este punto de interrupción, la ejecución del código se detendrá aquí.

En la fuente, haga clic en el código para agregar un depurador

Puedes ver cómo usarlo en detalle~

3. Cómo iniciar repetidamente una solicitud:

¿Quieres activar una solicitud y aún así actualizar la página tontamente? ¡No demasiado! En la red, seleccione la solicitud que desea reiniciar, haga clic con el botón derecho, seleccione "Reproducir XHR", ¡y puede activarla nuevamente! Como se muestra en la figura:

Cuatro, método de copia:

A veces necesitamos copiar algunos datos, pero ¿y si necesitamos conversión de formato? En la consola, primero convierta el formato y luego llame directamente al método de copia.Después de la llamada, los datos que desea copiar ya están en el portapapeles, y puede usarlos directamente pegándolos.

let object = {
    a: "test"
}
copy(object)
//{a: "test"}
复制代码

Los anteriores son algunos trucos de depuración que suelo usar. Puedes estudiar la documentación oficial para desarrolladores de Chrome . Hay muchos trucos interesantes. ¡Dominarlos mejorará enormemente nuestra eficiencia de desarrollo!