Chrome debug function named "Backbone" triggered

Question

Chrome debug function named "Backbone" triggered

Backbone provides the capability to activate functions in other classes by utilizing Backbone.Events effectively.

a.js
MyApp.vent.on("some:trigger", function(){
 // ...
});

b.js
function test(){
    doSomething();       
    MyApp.vent.trigger("some:trigger");
}

Is there a method to access the function "some:trigger" after debugging the doSomething() function without manually locating it in the code and setting a breakpoint?

javascript debugging backbone.js google-chrome-devtools

Answer 1

Answer №1

If you want to streamline your debugging process, consider blackboxing the Backbone code. This way, when you navigate to

MyApp.vent.trigger("some:trigger")

in Chrome, it will directly take you to your handler code without going through all the Backbone code.

Don't get overwhelmed by the instructions in the documentation shared above. Simply right-click on the Backbone file in the source viewer and choose "Blackbox Script". Then proceed to step into the trigger function.

https://i.sstatic.net/uZxxJ.png

Answer 2

If you want to streamline your debugging process, consider blackboxing the Backbone code. This way, when you navigate to

MyApp.vent.trigger("some:trigger")

in Chrome, it will directly take you to your handler code without going through all the Backbone code.

Don't get overwhelmed by the instructions in the documentation shared above. Simply right-click on the Backbone file in the source viewer and choose "Blackbox Script". Then proceed to step into the trigger function.

https://i.sstatic.net/uZxxJ.png

Answer 3

Answer №2

One useful technique involves the practice of Debugging JavaScript by Redefining Functions. This method entails replacing the original function with a modified version that includes a debugger statement, and then proceeding to execute the original function as intended.

Illustration

Instead of using an anonymous function, a named function is preferred for future reference.

MyApp.event.on("some:trigger", myFunc);

By storing a copy of the original function, it can still be called after debugging.

var oldFunc = myFunc;

myFunc = function() {
    debugger; // alternatively, utilize console.log()
    return oldFunc.apply(this, arguments);
}

This technique can be utilized in the Console or a code Snippet, ensuring that the code halts execution (or logs output with console.log) upon reaching the designated section.

Advantages

The advantage lies in its ability to consistently halt execution at the trigger handler location, regardless of the number of times it is executed within the code. There is no need to manually step through each previous code segment using debugger controls. Simply stepping through once for a single case would suffice.

Answer 4

One useful technique involves the practice of Debugging JavaScript by Redefining Functions. This method entails replacing the original function with a modified version that includes a debugger statement, and then proceeding to execute the original function as intended.

Illustration

Instead of using an anonymous function, a named function is preferred for future reference.

MyApp.event.on("some:trigger", myFunc);

By storing a copy of the original function, it can still be called after debugging.

var oldFunc = myFunc;

myFunc = function() {
    debugger; // alternatively, utilize console.log()
    return oldFunc.apply(this, arguments);
}

This technique can be utilized in the Console or a code Snippet, ensuring that the code halts execution (or logs output with console.log) upon reaching the designated section.

Advantages

The advantage lies in its ability to consistently halt execution at the trigger handler location, regardless of the number of times it is executed within the code. There is no need to manually step through each previous code segment using debugger controls. Simply stepping through once for a single case would suffice.

Chrome debug function named "Backbone" triggered

Answer №1

Answer №2

Illustration

Advantages

Similar questions

Tips for referencing a string in JavaScript

Ways to make the background color white in Bootstrap 5

Slick Slider - Defining the Initial Slide

Creating a unique Angular JS / Material / Datatables application - Proper script loading sequence required based on page context

Sometimes jQuery may require multiple executions with just one click

Display a modal using jQuery, PHP, and Ajax to verify if a user is

`Nextjs customizes the position of locales`

Is it necessary to include a back button when navigating through paginated tables?

Seamless Integration of Hosted Fields by Braintree

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

State of loading getServerSideProps in Next.js

Extract information from an external website using AJAX in Laravel

Highlight or unhighlight text using Javascript

Query modifier contains an unexpected token ":"

What is the best way to merge two JSON arrays using Axios in a React project?

Animated SVG Arrow Design

Arranging Data in a Table using Tabs and JavaScript

Removing an element from an array by evaluating each item within the array

Initiating and handling a POST request

Retrieve the object property based on an array of indices