Ways to prompt the debugger to pause whenever a specific script file is called during execution in Edge/Chrome debugger

I am currently in the process of debugging a Typescript web application, which is quite new to me as I have never delved into web development before. This particular project entails multiple script files and various libraries.

While running the application through the debugger, my main focus is on monitoring the activities within a single file known as my_script.ts. However, whenever I step through functions, it becomes tedious having to navigate through the different libraries as well.

Is there a way for me to establish a global breakpoint specifically for the entire my_script.ts file? This would allow the code execution to pause each time it returns from either foo_lib.js or foo_lib.ts back to my_script.ts, regardless of where in my_script.ts we are.

Additionally, once I am inside my_script.ts and decide to resume the execution, I prefer not to encounter a breakpoint at every line within my_script.ts. Essentially, I am seeking a method that triggers a breakpoint specifically for transitions from foo.js to my_script.ts, allowing me to simply hit "continue" whenever I venture into an external library and swiftly return to my_script.ts.

Update: If there exists an extension that could assist me in this matter, I am open to utilizing that as well!

javascripttypescriptdebugginggoogle-chrome-devtoolsmicrosoft-edge

Answer №1

According to debugger on MDN:

function potentiallyBuggyCode() {
    debugger;
    // perform potentially buggy actions to analyze, step through, etc.
}

Utilizing the debugger stops execution at the debugger statement, acting as a breakpoint in the script source.

In addition to this method, one may need to utilize the browser's built-in breakpoint features for debugging purposes. Chrome provides function breakpoints when there is a need to pause whenever a specific function is called. Furthermore, line breakpoints can be established and then deactivated after code initialization.

If deactivating breakpoints manually proves challenging or cumbersome, setting up conditional breakpoints could be beneficial, enabling precise specification of breaking conditions such as managing a manual boolean field within your library.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React Hook Form: When Submitting, Transform Date Object into String Date within an Array

Below is the data I am working with: { status: "Reserved", label: "Note", title: "Login Fragment - Navigation component With Coroutine", shareWith: "", notification_method: "Every Morning", notification_method_specific_time: Sat ...

javascriptreactjs

Is there a way to selectively include a filter in ng-repeat within a directive?

Utilizing an element directive across multiple views, the directive iterates through each 'resource' in a list of resources using ng-repeat="resource in resources". Different page controllers determine which resources are fetched from the API by ...

javascriptangularjsangularjs-directiveangular-controller

Sorting a select element using Javascript/JQuery while taking into consideration the label attribute present in the options

It came to my attention that the jQuery options and examples only covered the text and value attributes, causing errors when attempting to add the label attribute. I am looking for a way to include the label attribute in the sorting process, especially whe ...

javascriptjqueryselecttextlabel

Having trouble with React Page crashing when trying to access the component state

I'm attempting to create a side-bar menu that swaps out content in a <main> tag when menu buttons are clicked. However, I'm facing an issue where the page becomes unresponsive and eventually crashes due to React issues while trying to read ...

javascriptreactjsmaterial-ui

What is the mechanism behind jQuery triggering the execution of JavaScript code contained in script tags that are retrieved in an AJAX response?

What is the unique ability of jQuery that allows JavaScript code inside script tags in an AJAX response to be executed? In the absence of jQuery AJAX, using eval() has been a common method to achieve this functionality as discussed in posts such as: Cal ...

javascriptjqueryajax

Utilizing JavaScript for selecting a radio button on click event

I have implemented a feature with four radio buttons to select a country. Upon clicking on any of the radio buttons, I utilize Ajax to retrieve the states corresponding to that specific country. To indicate to the end user that data processing is ongoing, ...

javascriptajax

Combining various outcomes into a single entity for ion-slide in Ionic 2

I am facing a similar issue with this problem, but with a different twist. I want to showcase three results in ion-slide, and while iDangero Swipper seems like a solution, I believe ion-slide could also achieve something similar to this. Please take a look ...

angularjointypescriptionic2slice

The array does not store the ObjectId

I'm trying to implement the favoriting feature following a tutorial, but I'm encountering issues with making it work. Any assistance would be greatly appreciated. Thank you! UserSchema: var UserSchema = new mongoose.Schema({ username: {type ...

javascriptmongodbexpressmongoose

Issue stemming from reactivity causing difficulties with Vuex data mutation within actions

I have a Vuex store action that needs to interact with the API using new data for updating purposes. My goal is to create a separate object that mirrors an existing value in the store, allowing me to manipulate it without affecting reactivity. However, w ...

typescriptvue.jsnuxt.jsvuex

Utilize the power of Wikitude within an Angular 2 application

I am currently working on integrating Wikitude Architect View in Angular 2 by referring to the code at this link. My goal is to implement this code in an Angular 2 compatible way. import * as app from 'application'; import * as platform from & ...

javascriptangularjsangulartypescriptwikitude

How to Upload Your Avatar Image with the Stream-Chat API from GetStream.io

I am currently in the process of developing a Stream-Chat API project and I want to allow users to upload images directly from their devices. Upon testing, everything seems to be working fine, but the uploaded image is not displayed - only the default avat ...

javascriptnode.jsreactjsfile-uploadgetstream-chat

Switch from Index.html to Index.html#section1

Currently, I am working on a website and sending someone a draft for review. However, the Home screen is designed as a 'a href' link with "#home". The issue arises when the website opens from my computer; it goes to ...../Index.html instead of .. ...

javascriptjqueryhtmlcss

What is the best way to conceal a row when a particular field is devoid of content?

Is it possible to hide an entire table row if a field is empty? For example: If a certain field is empty, I want the entire row to be hidden, either using JavaScript or jQuery. I have tried some methods but none of them fully hide the row. Is there a way ...

javascriptphpjqueryhtml

Is there a way to properly access and interpret a .log extension file within a React component?

import React from "react"; import "./App.css"; function FileReaderComponent() { const readLogFile = () => { if (window.File && window.FileReader && window.FileList && window.Blob) { const preview = document.getElementByI ...

javascriptreactjsreact-hookslogfile

Steps for removing a p5.js instance once three.js assets have finished loading

I am trying to implement a preload animation using a p5 sketch while loading a three.js gltf file onto my webpage. The idea is to have the p5 animation play while the heavy gltf file loads in the background. However, I am facing issues with triggering the ...

javascriptthree.jsp5.js

Execute function when button is clicked in ExpressJS

I am looking to execute a function on my node server when a button on my website is clicked: What I currently have: Index.html (I have not included the entire content for simplicity) <button id="tv">tv</button> Client.js (Client side) const ...

javascriptnode.jsexpresslistener

Is it possible for me to transform this code into a useful helper function?

I am looking to optimize this conditional code by converting it into a helper function using a switch statement instead of multiple if statements. How can I achieve this in a separate file and then import it back into my component seamlessly? import { ...

javascriptreactjsvue.jshelper

What is the best way to connect objects that have been separated?

Looking for a way to reattach my detached objects and wondering how to replace the function that currently only triggers an alert. Any suggestions or help is appreciated. http://jsfiddle.net/jy2Zj/ In addition, I have another question - is there a method ...

javascriptjquery

Angular modules are designed to repeat chunks of code in a

Whenever I scroll the page, my function pushes items to an array. However, I am facing an issue where the pushed items are repeating instead of adding new ones. Solution Attempt onScroll(): void { console.log('scrolled'); var i,j,newA ...

javascriptangulartypescript

Rails : CSS/JavaScript functioning perfectly on local server, facing issues on Heroku deployment

My Rails website features various CSS animation effects and JavaScript elements. While these transitions function smoothly on my local environment, they do not work properly on Heroku. Examining the Heroku logs: 2013-09-17T17:13:36.081145+00:00 app[web.1 ...

javascriptcssruby-on-railsheroku