desarrollador - Depuración de JavaScript línea por línea usando Google Chrome

depurar javascript online

Question

¿Cómo puedo acceder a mi código de JavaScript línea por línea utilizando las herramientas de desarrollo de Google Chromes sin tener que acceder a las bibliotecas de JavaScript?

Por ejemplo, estoy usando mucho jQuery en mi sitio, y solo quiero depurar el jQuery que he escrito, y no el javascript / jquery dentro de las bibliotecas de jquery. ¿Cómo paso solo mi propio jquery / javascript y no tengo que pasar por los millones de líneas en las bibliotecas de jquery?

Entonces si tengo lo siguiente:

function getTabFrame() {
    $.ajax({
        url: ''get_tab_frame.aspx?rand='' + Math.random(),
        type: ''GET'',
        dataType: ''json'',
        error: function(xhr, status, error) {
            //alert(''Error: '' + status + ''/nError Text: '' + error + ''/nResponse Text: '' + xhr.responseText);
        },
        success: function(data) {
            $.each(data, function(index, item) {
                // do something here
            });
        }
    });
}

si coloco el punto de interrupción en $.ajax({ , si empiezo a depurarlo donde se detiene, si presiono F11, va directamente a las bibliotecas de jQuery. No quiero que eso suceda, quiero que vaya a la siguiente línea que es url: ''get_tab_frame.aspx?rand='' + Math.random(),

Intenté presionar F10 en su lugar, pero eso va directamente al cierre } de la función. Y F5 simplemente va al siguiente punto de interrupción sin pasar por cada línea una por una.

Answer 1

Suponiendo que está ejecutando en una máquina con Windows ...

1. Presiona la tecla F12
2. Seleccione la pestaña Scripts o Sources en las herramientas del desarrollador
3. Haga clic en el icono de la pequeña carpeta en el nivel superior
4. Seleccione su archivo JavaScript
5. Agregue un punto de interrupción haciendo clic en el número de línea a la izquierda (agrega un pequeño marcador azul)
6. Ejecute su JavaScript

Luego, durante la depuración de la ejecución, puedes hacer un puñado de movimientos de pasos ...

• F8 Continuar: Continuará hasta el próximo punto de interrupción
• Paso F10 : Pasos sobre la siguiente llamada de función ( no ingresará a la biblioteca)
• F11 Ingrese a: Pasos a la siguiente llamada de función (ingresará a la biblioteca)
• Shift + F11 Step out: pasos fuera de la función actual

Actualizar

Después de leer su publicación actualizada; para depurar su código, recomendaría temporalmente usar el código fuente de desarrollo de jQuery . Aunque esto no resuelve directamente su problema, le permitirá depurar más fácilmente. Por lo que estás tratando de lograr, creo que deberás ingresar a la biblioteca, así que espero que el código de producción te ayude a descifrar lo que está sucediendo.

Answer 2

... ¿Cómo puedo pasar por mi código de JavaScript línea por línea utilizando las herramientas de desarrollador de Google Chromes sin que vaya a las bibliotecas de JavaScript? ...

Para que quede constancia: en este momento (febrero / 2015), tanto Google Chrome como Firefox tienen exactamente lo que usted (y yo) debemos evitar para acceder a librerías y scripts, e ir más allá del código que nos interesa, se llama Black Boxing:

Cuando usa Blackbox en un archivo de origen, el depurador no saltará a ese archivo cuando recorra el código que está depurando.

Más información:

• Chrome: Blackbox JavaScript Source Files
• Firefox: bibliotecas de recuadros negros en el depurador