debugging – chrome webdev: can step break only in main source code?

I have limited understanding about how debugging works.
Can I use step debugging only in my main source code?

Suppose I have react app, I set a break point in my main file. Then I want to track where the program goes step by step and analyse it’s variable value and I only want to analyse within my source code.

Now it just goes deep into my included dependencies and it takes long long time to get back to my main app.

If there isn’t a way to tell step debugger only breaks when it hits my source, is there any alternative that provides a way to do what I intended to do? Thanks!

I already googled it, get random result. I really don’t know what the keyword is.

debugging – chrome webdev: can step debugging break only in main source code?

I have limited understanding about how debugging works.
Can I use step debugging only in my main source code?

Suppose I have react app, I set a break point in my main file. Then I want to track where the program goes step by step and analyse it’s variable value and I only want to analyse within my source code.

Now it just goes deep into my included dependencies and it takes long long time to get back to my main app.

If there isn’t a way to tell step debugger only breaks when it hits my source, is there any alternative that provides a way to do what I intended to do? Thanks!

I already googled it, get random result. I really don’t know what the keyword is.

How to return to current position in Chrome Dev Tools?

When I am debugging my code with Chrome Dev Tools I often jump around inside a file and between files, so that I leave the current position. Is there another way than going one step forward to return to the current position?

Why to use Higher order component

I am displaying contact list array.

If contacts array is empty it will show the loader else will display contact list.

I render loader using higher order component Using this tutorial. For this I got performance summary as shown in the below image-

enter image description here

when i render loader using simple if else condition then i had performance graph as below –
enter image description here

comparing this i got to know that while using higher order component it requires more time than simple loop.

Can anyone please explain me which is better to use ? and when we should use the Higher order component ? what are advantages and disadvantages of using Higher order component ?

Inspect scope of anonymous object

There is a website which cannot be changed and includes a script like this:

function() {
    var things = { ... };
    var socket = new WebSocket(...);
    var bar = function() { ... }
    ...
}() // IIFE, be an anonymous function and get called

The anonymous object goes on living and communicates with the server. So it would actually make sense that I try to inspect things. But I see no way how to log things into the console.

The script also initially does this:

window.foo = bar

and so when I enter the console I can call window.foo() and in the debugger I will have access to things. But I still cannot access it from the console without calling window.foo().

Is there a way to inspect things? (In Chrome or Firefox)

Inspect scope of anonymous function

There is a website which cannot be changed and includes a script like this:

function() {
    var things = { ... };
    var socket = new WebSocket(...);
    var bar = function() { ... }
    ...
}() // IIFE, be an anonymous function and get called

The anonymous object goes on living and communicates with the server. So it would actually make sense that I try to inspect things. But I see no way how to log things into the console.

The script also initially does this:

window.foo = bar

and so when I enter the console I can call window.foo() and in the debugger I will have access to things. But I still cannot access it from the console without calling window.foo().

Is there a way to inspect things? (In Chrome or Firefox)

How to black box all the script files except the file you are debugging?

I am trying to debug a nodejs code in chrome devtool
by the
node --inspect-brk app.js command.

While debugging the debugger most of the time getting into node’s internal core modules . I know this can be avoided by black boxing the script file.

But i want to know is there a way to black box all the script files except the file you are debugging in one go ?

enter image description here

VS.Code Debugging with a breakpoint in a script inline HTML file

Hi There

In Visual Studio Code, I’m trying to debug/breakpoint a simple HTML file with some JavaScript.

I’m using VS.Code, installed with extension “Live server”, and “Debugger for Chrome” to a Google Chrome browser.

The problem is I cannot set any breakpoint in VS.Code HTML-file nor at Chrome DevTools to inspect the code (Says: !–Code injected by live-server–), so is there a wise head, there can help me here ?

Cheers Jan

NB: I have looked at this topic, but it doesn’t concern VS.Code:
How to set breakpoints in inline Javascript in Google Chrome?

VS.Code - Chrome Browser

Debug Angular from VS code got status 0 but web browser got 401 error

After the token exprired, the website will get the 401 error as the unauthorized, however, when I debug on the VS code, it turn out the error we catched is error status 0?

I am quite confused how the 401 error work? Is that when back end request client credentials failed, the website couldn’t found, will return the error? as I didn’t throw any error form the HttpHandler. The only thing is my backend request the clinet credentials failed, it will return whatever it got.

Also I don’t understand why the url:null,
as I can see it on the Request URL and Header?

enter image description here

enter image description here

Is it possible debug iOS Chrome on Windows 10?

As the title says, I need to debug a website opened with mobile Chrome on an iOS device (iPod, iPad etc.) on Windows 10. I have successfully set up iOS Safari debugging on Windows 10 via Chrome DevTools (GitHub repo , helpful comment). I would love to do the same thing except with Chrome or Firefox and not Safari. Is it even possible?