Why am I not able to see the local variables used at a debug point in angularJS library JS file - angularjs

I am trying to see the value of a variable inside a function when the execution is paused at a debug point inside the function using chrome's developer tools .I selected/hovered over the variable but the tooltip with the value is not appearing unlike normal javascript function in other js files.

try type the variable name in console window, you should be able to see what is the variable value.
example :

Select the whole variable name and hover it again.

Related

Disable emmett in functions for styled-components

I keep getting emmett autocomplete suggestions even inside the template string used with styled/css/createGloablStyle when using styled-components. Is there a way I can get around to disabling emmett inside the function template string or maybe at least push it down the suggestions? It's not a problem per see but I have been exploring vscode and want to know if there's a setting that helps.
Image attached below for reference. The body tag I want to disable in autocomplete suggestions.
PS: I don't want to disable emmett globally or even in the file, just in the function scope.

ReactJS Redux Loading Image Dynamically from Variable

I am currently working on a React + Redux Project and wanted to use language messages to render an image.
The problem is that, because the image name is dynamic (because of the language switching), I can't use require(imageVar) to load the image.
What I currently am working with is this (this is inside of the render() function):
FormattedMessage {...messages.fullLogo}>
{
(fullLogo) => <Img src={require(`${fullLogo}`)} alt="Banner" />
}
</FormattedMessage>
This should theoretically load the image from the url (yes fullLogo is a full url to the image).
What I tried inside of src={} was:
require(`${fullLogo}`)
require(fullLogo)
require("" + fullLogo)
require(String(fullLogo))
require(fullLogo.toString())
Everytime I try one of these (except the 3rd one - gives me an fatal error) I get an "Could not Load Module './img/image.png'" error.
I guess this means, that the name does load but require somehow cannot access the variable.
However if i put the path directly into the require() function. It successfully loads the image.
I don't want this though. I want it to load it dynamically.
Maybe you guys have some experience with it.
Thanks in advance!
PS: If you need any extra code, let me know!
You can't dynamically require files by variable at runtime, since require happens before runtime, when you bundle your app together (e.g. using webpack).
Based on how the packager works, this isn't really possible with require.
Packaging happens once before runtime so those variables don't have values yet.
What do you mean by langage switching ? What does message.fullLogo contains ? If it contains an url, just use that url without require:

How to easily know where a function is defined or implemented in Chrome dev tools? Function is used in an AngularJS attribute

If I have an AngularJS app and I see this <li ng-show="vm.CanUse('a-b-c')" ng-class.. in the Elements tab in Chrome dev tools, is there a way to quickly and easily navigate to where the CanUse function is defined?
I know I can do a search with ctrl-shift-F in the Source tab but if I have a ton of files which use the function or have multiple implementations with the same name, it can take me a while to find the implementation I want.
I tried something like this: <li ng-show="debugger;vm.CanUse('a-b-c')" ng-class.. expecting to break into the debugger but it didn't work.
Any suggestions?
There is a special AngularJS debug extension called Batarang for this type of scope level debugging. However, it requires a plugin.
https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk
Once you are in "elements" pane, click the function definition. Next, click $scope tab. Then "show function definition". See image below.
From there you should be able to click a "blue breakpoint" (left margin, near line number) for debugging.
Execute the function (clicking button etc) and the debugger should stop at that function.

AngularJS $window.open throws "Cannot read property 'arguments' of null"

I'm creating a simple web page where i display a button which execute this code
$window.open(link, "_self");
The link variable is a simple telegram link for a channel, but this is not the problem, the problem, as the question say itself, is about arguments variable in $window.open.
This in my opinion is strange because when i logged in the console $window.open function, i received this output:
function pbWindowOpen() {
lastBlockCaller = {
caller: arguments.callee.caller,
args: arguments.callee.caller.arguments
};
try {
return newWindowOpenFn.apply(this, argument…
At this point, should not i see an argument variable inside this function? How could i solve this problem?
Passing some arguments could resolve my problem? If yes, there's an answer about why i'm having arguments null?
I've also tried with window.open but nothing changes, always the same problem
That shouldn't happen if you are running your code in a browser (in other env you may have some initialized variable window representing something else), $window is a wrapper in top of var currWindow = $window.self || $window.window and then do a perform of callong open(...) function. Hence, you neither using the native javascript code badly in a angular context, and again that would be easily mock-ableif we mock $window and create a property call self or window inside it. So it will work in the application, and will also be testable.

How to declare local variable in closure javascript template

I started learning closure javascript template library .
Is it possible to create local variable inside a closure template soy file ?
I tried using
$i=1;
but it prints $i=1 on screen in place of declaring it.
I had looked inside examples at
http://code.google.com/p/closure-templates/source/browse/trunk/examples/features.soy
but didn't find same type of example.
Yes, this is now possible! If you have a build of Closure Templates that was cut in 2011, you can declare local variables as follows:
{let $first: $person.firstName /}
{$first}
Note that like {param}, you can also define a local variable with a more complex expression between opening and closing tags:
{let $name}
{$person.firstName} {$person.lastName}
{/let}
Sometimes you need to use this form if you want to use other commands to define your variable:
{let $className}
{css name_class}
{/let}
<div class="{$name_class}"></div>
For more information about using let visit project's documentation

Resources