VS code extension for knowing where function is called from - javascript

I want VScode to inform where a defined function is being called from.
file utils.js
function counter(){
console.log('counter');
}
export default counter;
file index.js:
import counter from './utils';
counter();
I want to know in counter function definition in utils.js that it is being used at index.js
if the function counter is called in different files I want to get the information about where the function is being used | called from.

As stated by #hUwUtao, the callstack has the information about the callers of your counter() function when it is executing. If you want to find references without executing, VS Code can do this by right-clicking the function, then selecting Go to References, as seen in the following screenshot.

Thanks for the answers. I found that VScode has an inbuilt reference locater. Just right-click the function and select the option find all references, and VScode will locate all the references to that functions Shortcut: Alt + Shift + F12

Explain: Browser log should show the whole callstack where the error should throw

Related

Django 3 by example bookmarklet_launcher.js

Following is a piece of code in the Django 3 by example book we can use to bookmark in a browser and upon clicking the bookmark, the code in it will be executed.
Can anyone please help me understand this code?
(function(){ if (window.myBookmarklet !== undefined){ myBookmarklet(); } else { document.body.appendChild(document.createElement('script')).src='https://127.0.0.1:8000/static/js/bookmarklet.js?r='+Math.floor(Math.random()*99999999999999999999); } })();
Why do we need to put the function inside parenthesis? (function.....)()
How the browser executes the code. We put a javascript tag at the start of the code.
JavaScript:(function.....)()
what is this function myBookmarklet() and when if statement will be actually executed? How will the window object have myBookmarklet property?
Any relevant resources will be appreciated. Thanks a lot
It's because it's an anonymous function, it has no name. Because it has no name and needs to be executed, it has to be surrounded with parenthesis to be able to run it by calling it with () at the end.
Exactly like that. If you want to write a function that will not be needed in any other place, you can define it without a name so it's anonymous. To call it, see 1.
Before that js code, the HTML file has probably a series of <script> tags where it defines certain dependencies, in this case javascript files. One of those js files has assigned myBookmarklet to window, like this: window.myBookmarklet = //... a function definition. The code you posted is checking if window.myBookmarklet !== undefined before calling that function.

Intellij Debugger Console for Javascript imported objects or functions

I have a Jest file that I am debugging in Intellij.
import { screen, waitFor } from '#testing-library/react';
import userEvent from '#testing-library/user-event';
describe('<SamplePage />', () => {
afterEach(() => {
jest.clearAllMocks();
});
it('Correct text in SampleForm', () => {
renderPage();
expect(screen.getByRole('heading')).toHaveTextContent(
"Text to check",
);
});
});
Then I normally put a breakpoint at the expect() line so that the view has been rendered by then. Once at the breakpoint, I open the Debugger Console and I start playing with the test api by testing various statements. However I immediately get an error in the Debugger console when trying to call the screen.debug():
Although the autocomplete is working in the debugger for the screen:
The workaround that I have been using is to assign the imported object screen into a variable x for example. Then when I get to the breakpoint I can play with the x variable as the screen and call various methods like debug or getByRole.
However this is cumbersome since there could be multiple imported objects that I want to explore and assigning each of them to a temporary variable is just not scalable. Does anybody know how to fix this in Intellij?
Undefined variables (screen in your case) while evaluating code during debugging is caused by the weird way imported objects are transpiled + missing name mappings in sourcemaps: if the variable is renamed while transpiling/obfuscating, and no appropriate name mapping is provided, the debugger won't be able to match variable in source code with the one in VM.
There are some known issues when evaluating ES6 imports in modules transpiled by babel/built by webpack. Please see https://github.com/webpack/webpack/issues/3957, https://github.com/babel/babel/issues/1468 for details. There is unfortunately no way to fix the issue on the IDE end.

Laravel Mix Javascript undefined function onClick

I am using Laravels Mix feature with javascript and I am having a bit of trouble. I've made a new javascript file and included it in app.js, I've then done a function in this file. I want to call it from an onClick event however its giving me an error.
In cart.js I have an array that is adding all the products, and I also have this line of coded added.
<a onClick="removeProduct(${product["id"]})" class="btn-remove1">Remove</a>
Also in cart.js I have this function, that needs to be called on the onClick event.
function removeProduct(id) {
console.log(id);
}
However, It then gives me this error when trying to call removeProduct()
Uncaught ReferenceError: removeProduct is not defined at HTMLAnchorElement.onclick
So I'm not sure how to handle this, I guess I could use jQuery and wait for the object to be clicked and then get the id but just wondering if I can do it by onClick. Thanks for any help!
Edit:
Looking into this some more, Webpack is including Cart.js and in app.jss the function removeProduct() is there. Do I need to somehow call it like Cart.removeProduct() or something? (I've never used web pack/mix before)
I've found out with webpack you need to define it in the global scope. You can simply do that by adding this line of code.
window.removeProduct = removeProduct;
Clear your cache and then check or check that js file is included into your file or not.

Overriding core JS commands?

I'm trying to modify/limit/prevent access to certain JS commands of my browser. For example commands like navigator.clipboard; However, I'm not sure how to approach this.
Is it possible to override these commands with user-defined javascript injected in the page, or do i have to edit the browser's javascript compiler and re-compile it from source for this?
I'm not really familiar with browsers and want to save time by knowing a general direction to follow. Thanks
First of all navigator.clipboard is not a function, but here is an example using the read function of navigator.clipboard:
navigator.clipboard.read = function (originalFunction) {
return function (yourParamsYouWantForThisFunction) {
// Do Stuff you wanna do before the real call. For example:
console.log(yourParamsYouWantForThisFunction);
// Call the original function
return originalFunction.call();
};
}(navigator.clipboard.read); // Pass the original function reference as a parameter
You may wonder, why there are two function statements:
The first one is there, so that we can pass the original function at runtime. If we would not do that, we would not be able to access the original navigator.clipboard.read function.
The second function is the actual function, that you will be using later, when you call navigator.clipboard.read().

Does Webstorm support autosuggestion for Revealing-Module-Pattern in different Files

When I try to use the autosuggestion in Webstorm(V 10.0.4/ Linux machine)
with the Revealing-Module-Pattern and the definition of the module is in one File like this:
var testModule = testModule || (function(){
function myPrivateTestFunction(){
console.log("test");
}
return{
test: myPrivateTestFunction
}
})();
in another File I try to call the the function by:
testModule.test();
it correctly finds the module-object, defined in the other file but doesn't find the function.
If I look at the settings: File->Settings->Javascript
There is an option called "Weaker type guess for completion".
If I enable this, it indeed shows my desired function testModule.test().
But it also shows all private members of the module and of all other modules, defined somewhere, so this doesn't make sense to me.
Logged as WEB-18186, please vote for it to be notified on updates
The feature was implemented by the Webstorm Team.
I tested it (in the Early Access Program Version 142.5255).
It works perfectly!
Thanks to the Webstorm-Team who implemented the feature that fast and to lena who created the ticket!

Categories