Primero, depure el código en la página web
código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function test(){
console.log(1)
test1()
console.log(3)
}
function test1(){
console.log(2)
}
console.log(0)
test()
console.log(4)
</script>
</body>
</html>
Después de abrir el navegador, abra el panel de depuración, busque el código correspondiente en el panel fuente, rompa el punto y actualice la página para comenzar la depuración:
Los botones principales y sus funciones durante la depuración:
1. Reanudar la ejecución del código
Cuando llegamos a un punto de interrupción, [Reanudar ejecución de código] omitirá el punto de interrupción y continuará ejecutando el siguiente código hasta que se encuentre el siguiente punto de interrupción.
2. Omite la función y ejecútala en un solo paso
Se puede ver que al hacer clic continuamente, no entrará dos veces en la función test1. En otras palabras, **Este botón es una ejecución de un solo paso, solo saldrá de la llamada de función y no ingresará a la llamada de función. **Además, esta ejecución de un solo paso significa: cada paso del código se interrumpirá después de hacer clic en este botón, un paso a la vez.
3. Ingrese la llamada de función
Al contrario de 2, la llamada de función no se ingresará en 2, y este botón ingresará cuando encuentre una llamada de función, y también se ejecuta en un solo paso.
function test(){
console.log(1)
console.log(2)
}
function test1(){
console.log(3)
setTimeout(()=>{
console.log(7)
},1000)
console.log(4)
console.log(5)
}
console.log(0)//断点位置打这里
test()
test1()
console.log(6)
Lo que es más especial es que su nombre es [Single step into function call], cuando encuentra asincronía en la función test1, como setTimeout, su próximo punto de interrupción es console.log(7), es decir, después de encontrar asynchronous , se completará la ejecución del código síncrono, es decir, se ejecutará todo el código en el subproceso principal, y luego el punto de interrupción se interrumpirá en el siguiente ciclo de eventos del bucle de eventos [es decir, se pondrá en cola en la cola de eventos después del ciclo asíncrono se completa la ejecución]. Aquí vemos que el siguiente punto de interrupción está en la primera línea después de asíncrono.
4. Salte de la llamada de función
Esto es relativamente simple, es decir, ejecute el código restante del cuerpo de la función donde se encuentra el punto de interrupción actual y luego salga del cuerpo de la función. El siguiente punto de interrupción es donde saltó el cuerpo de la función.
5. Forzar la ejecución de un solo paso
Esto es muy similar a la llamada a la función de entrada en 3, pero la diferencia es [llamada a la función de entrada] cuando se encuentra con un código asincrónico, se ejecutará todo el código en el subproceso principal y luego se romperá el punto de interrupción en el siguiente evento del bucle de eventos. Bucle [es decir, se pone en cola en la cola de eventos después de la ejecución asincrónica].
La ejecución forzada de un solo paso consiste en romper los puntos paso a paso según el orden de ejecución del código.
6. Deshabilitar el punto de interrupción
Como sugiere el nombre, el papel de esta virtud es invalidar los puntos de quiebre que alcanzamos, por ejemplo, alcanzamos varios puntos de quiebre. Luego encienda este botón y luego actualice, encontrará que todos los puntos de interrupción ya no funcionan.
7. Deténgase en el informe de errores
Después de activar este botón, si hay un error en el código, se detendrá en la línea donde se informa el error durante el proceso de ejecución.
function test(){
console.log(1)
console.log(2)
}
function test1(){
console.log(a)
setTimeout(()=>{
console.log(7)
},1000)
console.log(4)
console.log(5)
}
console.log(0)
test()
test1()
console.log(6)
Cuando no defino a, ejecuta el código y se detendrá aquí:
Segundo, depure el código en vscode
1. Cree una configuración de depuración
Como se muestra en la figura anterior, puede ingresar el código de depuración.
2. El panel de depuración de vscode
3. Panel de herramientas de depuración
Este contenido es similar a la herramienta de depuración del navegador, como se muestra en la siguiente figura:
Tres, el principio de sourceMap
En el proceso de desarrollo real, los scripts de JavaScript se vuelven cada vez más complejos. La mayor parte del código fuente (especialmente varias bibliotecas de funciones y marcos) debe convertirse antes de que pueda colocarse en el entorno de producción.
Las transformaciones de código fuente comunes caen principalmente en las siguientes tres situaciones:
（1）压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。
（2）多个文件合并，减少HTTP请求数。
（3）其他语言编译成JavaScript。最常见的例子就是CoffeeScript。
Estas tres situaciones hacen que el código en ejecución real sea diferente del código de desarrollo, lo que dificulta la depuración. Entonces sourceMap necesita ser introducido.
El principio habitual de sourceMap es este:
1，在生成线上文件的同时，生成一个映射规则；
2，根据映射规则，将线上文件映射成源文件。
1. Genere un archivo .map
El primer paso generalmente es generar un archivo .map por parte del desarrollador a través de algunas de sus propias herramientas (como gulp/webpack):
{
"version":3,//sourcemap 的版本，一般为 3
"file":"bundle.js",//编译后的文件名
"mappings":";;AAAA;AACA;AACA;AACA,c",//位置信息
"sources":["webpack://tes-test/./index.js"],//源码文件名,可能有多个源文件
"sourcesContent":["console.log(\"222\")\r\nvar a=2\r\nlet b=4\r\nconsole.log(b)"],//每个 sources 对应的源码的内容，每个文件就是数组的一项
"names":[],//转换前的变量名
"sourceRoot":""//源码根目录
}
Luego agregue esta línea al final del archivo en la línea:
//@ sourceMappingURL=/path/to/file.js.map
Indique el archivo de mapa utilizado por el código en línea, de modo que el mapa de origen pueda procesar el archivo en línea a través de /path/to/file.js.map.
2. Analice las reglas de mapeo y asigne archivos en línea a archivos fuente a través de él
Esta operación generalmente la realizan los navegadores que admiten mapas de origen.
Cuando el primer paso se refiere al archivo de mapeo, el navegador ejecuta el archivo en línea. Si el navegador admite el mapa de origen, analizará el archivo de mapa, principalmente el análisis de la matriz de mapeo, que tiene principalmente tres capas:
"mappings": "ABCDA,ZSDFS,SDDAF;EEZAV"//位置信息
第一层是行对应，以分号（;）表示，每个分号对应转换后源码的一行。所以，第一个分号前的内容，就对应源码的第一行，以此类推。
第二层是位置对应，以逗号（,）表示，每个逗号对应转换后源码的一个位置。所以，第一个逗号前的内容，就对应该行源码的第一个位置，以此类推。
第三层是位置转换，以VLQ编码表示，代表该位置对应的转换前的源码位置。
Es principalmente la conversión de posición de la tercera capa, que utiliza la codificación VLQ: vale la pena señalar que se puede omitir el índice del quinto nombre. El índice del archivo fuente, el número de línea del archivo fuente y el número de columna del archivo fuente también se pueden omitir al mismo tiempo.
Esto significa que la longitud de la matriz de puntos mapeados puede ser 1, 4 o 5.
Todos los números de filas y columnas del mapa de origen comienzan a contar desde 0.
[生成文件的列]
[生成文件的列，源文件索引，源文件行号，源文件列号]
[生成文件的列，源文件索引，源文件行号，源文件列号，名称索引]
3, reglas de codificación de mapeo
Ejemplo:
console.log("222");
let b=4;
console.log(b);
Paso 1: Primero escriba las tres líneas de código para la matriz de asignación básica. La asignación debe calcularse de la siguiente manera, correspondiente a esto [columna del archivo generado, índice del archivo fuente, número de línea del archivo fuente, número de columna del archivo fuente , índice de nombres ]
[0000],[0010],[0020]
Paso 2: Cálculo de valores relativos
Reemplace cada número en el punto de mapeo con la diferencia entre el punto de mapeo actual y la posición correspondiente del punto de mapeo anterior, es decir, el valor correspondiente de la última matriz menos el valor correspondiente del anterior (solo complete 0 para menos de 5 dígitos), por lo que el mapeo La matriz se convierte en:
[0000],[0010],[0010]
Paso 3: combine números
Escriba todos los números que aparecen en las asignaciones en una sola línea, sepárelos con (comas) para los diferentes puntos de asignación y sepárelos con ; (punto y coma) para las diferentes líneas. Entonces se convierte en:
0000;0010;0010
Paso cuatro: codifique números en letras usando la codificación VLQ
1. 如果数字是负数，则取其相反数。
2. 将数字转为等效的二进制。并在末尾补符号位，如果数字是负数则补 1 否则补 0。
3. 从右往左分割二进制，一次取 5 位，不足的补0。如果最高位所在的段不足5位，则前面补0，低位段的后面补0。
4. 将分好的二进制进行倒序。（有的超过5位，如）
5. 每段二进制前面补 1，最后一段二进制补 0。这样每段二进制就是 6 位，其值范围是 0 到 64(含0，不含64)。
6. 根据 Base64 编码表将每段二进制转为字母：
Ejemplo:
以 170 为例，
1)转为二进制即：10101010
2)170 是正数，右边补 0：101010100
3)从右往左分割二进制：10100, 1010。
4)不足5位的补 0：01010, 10100
5)倒序：10100, 01010
6)除最后一个前面补 0，其它每段前面补 1：110100, 001010
7)转为十进制：52, 10。
8)查表得到：0K
Entonces el mapeo se convierte en:
AAAA;AACA;AACA
El navegador ejecuta el archivo en línea. Si el navegador admite el mapa fuente y encuentra que hay una dirección de archivo de mapa correspondiente al final del código bundle.js vinculado, analizará el archivo de mapa y encontrará el código fuente correspondiente a cada línea de código. Esto permite la asignación de código fuente y código compilado.
4. Use el paquete web para generar archivos de mapas
Crear un nuevo proyecto
npm init -y
npm install webpack webpack-cli -D
El directorio raíz configura webpack.config.js de webpack, principalmente source-map:
const path = require("path");
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
mode: "none",
devtool:"source-map"
}
Cree un nuevo archivo index.js:
console.log("222");
let b=4;
console.log(b);
Luego ejecute npx webpack en la línea de comando para generar el archivo de paquete dist. Observe que hay dos archivos en esta carpeta, un paquete de código compilado.js:
/******/ (() => {
// webpackBootstrap
var __webpack_exports__ = {
};
console.log("222");
let b=4;
console.log(b);
/******/ })()
;
//# sourceMappingURL=bundle.js.map
El otro es un archivo de mapa, donde puede ver que el mapeo se calcula arriba:
{
"version":3,
"file":"bundle.js",
"mappings":";;AAAA;AACA;AACA,e",
"sources":["webpack://tes-test/./index.js"],
"sourcesContent":["console.log(\"222\");\r\nlet b=4;\r\nconsole.log(b);"],
"names":[],
"sourceRoot":""
}
Luego introduce este bundle.js en index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
Abra el navegador y podrá ver el código fuente del mapeo:
Cuarto, la configuración del mapa fuente de webpack
const path = require("path");
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
mode: "none",
devtool:"source-map"
}
Si la configuración del paquete web no genera un archivo de mapa, devtool tiene las siguientes situaciones:
false：不使用 source-map
eval：mode是 develpment的情况下默认值，不会生成 source-map文件，它会在 eval执行的代码中添加 //# sourceURL=注释，同时调试也能定位到代码位置：
webpack tiene una expresión regular de configuración de sourceMap:
"^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$"
Según nuestras propias necesidades, podemos configurar diferentes source-maps, según esta expresión regular, se puede dividir en las siguientes capas:
nivel uno
没有值：没有值的时候，就是剩下source-map:会生成map文件，并且编译后的文件会指向这个map文件。
inline：不会生成map文件，而是将映射文件以dataUrl 的方式内联在打包后的代码最后。
hidden：生成map文件，但是编译后的代码最后不会指向这个map文件，即不做关联
eval：不会生成map文件，但是每个模块，会用一个eval包裹在编译后的代码中
Segunda planta
nosources:map文件中有sourceContent对应的源码内容，其实根据mapping已经能映射源码了，这里的源码内容就可以不要掉，可以缩减map文件的大小。当配置这个的时候，map文件就没有sourcesContent内容。
El tercer piso
cheap:map文件中，通常会有行和列的信息，而实际上，我们只需要映射到行信息即可，列信息可以省略，所以这里可以加上这个cheap参数，把列信息忽略。
cuarto piso
module：当a模块使用loaderA转译一次，再使用B模块转译一次的时候，如果我们想编译后的代码可以直接映射源码，而不是只是映射到最后一次B转移的代码。那么就可以加上这个参数，不管中间转译了多少次，都直接映射源码。
quinto piso
source-map：只要不是配置的false或者单独一个eval,它是必须要配置的，就是生成map文件，当然，它受前几个配置的影响。
Es decir, la configuración se puede resumir en la siguiente figura:
De acuerdo con la declaración anterior, en el proceso de desarrollo real, a menudo usamos: mapa fuente-módulo-barato para configurar.
Cinco, depura el código del proyecto Vue
Mi proyecto se construye directamente usando webpack, sin usar vue-cli, cuando el devtool de webpack configura el mapa fuente de módulo barato.
1. Depurar en el navegador chorme
2. Código de depuración en vscode
