So for my sins I'm on an Angular 2 project. I use angular.element($0).scope() all the time on my old Angular 1 work to inspect an element and see what's on the scope at that point in the dev tools. This is super useful, is there something similar in Angular 2?
Augury is a great suggestion. If you want direct access use
ng.probe($0)
See also
Get ComponentRef from DOM element
How to access the *angular 2* components' data in the browser's console?
how to access Angular2 component specific data in console?
Have you tried using Augury? Link: https://github.com/rangle/augury
Related
I am new to vue, debugging something, and have question: can I print something into the console from Vue getter? For example:
get foo() {
console.log(bar);
return bar;
}
Can I write that line console.log(bar)?
Thanks!
Best thing to do for debgging vue is to download the extension for vue.js - its the debugging tool chosen by vue -
(I'm assuming chrome is being used so the link below is for the debugger) -
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en
Using the debugger you can access the vue instance which is what I think that is what your looking for here:
hope that helps -
W
Can I write that line console.log(bar)?
To answer you question specifically, yes you can do that (assuming bar is declared within scope).
Did you declare that getter on the Vue instance? If so, that is unusual, and typically you would use a computed property instead.
Using console.log() as a quick debugging mechanism is fine, but like Wally suggested you should use the Vue dev tools extension for most debugging situations, also in combination with the JavaScript debugger built into your browser.
I just started learning angular js. I have understanding that we can access and debug scope available to any dom element by selecting/inspecting anywhere on the page and running
angular.element($0).scope()
code on console. But if you try this, I find its value undefined. How they are hiding it and how can I reach to data through console?
Its likley that debugInfoEnabled in $compileProvider is set to false, which means angular.element($0).scope() will always return undefined
You can however run angular.reloadWithDebugInfo in the console which will override this.
Reference:
AngularJS $compileProvider Documentation
AngularJS reloadWithDebugInfo Documentation
Load angular.js instead of angular.min.js. You will get better stack traces and data debugging will be enabled.
From the Docs:
angular.element — jQuery/jqLite Extras
AngularJS also provides the following additional methods and events to both jQuery and jqLite:
scope() - retrieves the scope of the current element or its parent. Requires Debug Data to be enabled.
— AngularJS angular.element API Reference - jQuery/jqLite Extras
For more information, see
AngularJS $compileProvider API Reference
AngularJS angular.reloadWithDebugInfo API Reference
Context
I'm trying to debug a React application but cannot modify the source code to log redux variables. In chrome I'm able to access the redux store via the associated extension but it seems no such equivalent exists for safari.
Question
How can I access the redux store in Safari? Can I do so using the console?
The simplest solution, unfortunately, is to modify the source code to set a global variable to the Redux store. (It may be worth preemptively modifying any applications you can control to do this, just to make Safari easier to debug.)
Without modifying the source code, it should be possible, although it's awkward. The following instructions work for React 16.12.0.
In Safari's Web Inspector (dev tools), go to the Elements tab and find your React root element (the <div id="root"> or similar that you pass to ReactDOM.render).
Click on it. Web Inspector should show a = $0 next to it, indicating that you can now reference that DOM node in the Web Inspector console as $0.
In the Web Inspector's Console tab, type Object.keys($0) and press Enter to see the internal properties that React adds to the DOM node. For my app, I see ["__reactContainere$8yexuoe6iiv", "_reactRootContainer"].
Dump the internal React object to the console by typing $0["__reactContainere$8yexuoe6iiv"] (substituting your internal property name) and pressing Enter.
Inspect the object properties to find the Redux store: on my app, it's under child, under memoizedProps, under store, but this may depend on the specifics of your React component hierarchy and where and how you mount Redux's <Provider>.
Use the store reference you just found to call Redux's getState. For my app, that means typing $0["__reactContainere$8yexuoe6iiv"].child.memoizedProps.store.getState() and pressing Enter.
A simpler one-line alternative to the above:
document.getElementById('root')['_reactRootContainer']._internalRoot.current.child.memoizedProps.store.getState()
In case you are using Nextjs framework, you can achieve this by opening the console in safari. Type window in it. Expand it. Now just check in the window object property. You will find a key something like '__REDUX' or something like that. In my case it was __NEXT_REDUX_STORE__.
Now after you find it just enter the following in your console.:
__NEXT_REDUX_STORE__.getState();
you can now check your current redux state of your application.
I'm not aware of a safari extension for redux debugging (corrections welcome). This thread suggests that it's due to a lack of a dev-tools API: https://github.com/zalmoxisus/redux-devtools-extension/issues/435
Redux state isn't in the global scope, so you won't be able to access it through the console without modifying the source code.
You could just extract state using the connect function. Then just stringify it?
<pre>JSON.stringify({this.props.store, null, 2})</pre>
Then you could visually see it.
Adding to #josh-kelley's answer...
In 2021, tested with Safari Version 12.1 (14607.1.40.1.4), following line did the trick for me:
document.getElementById('root')['_reactRootContainer']
._internalRoot.current.child.memoizedProps
.children.props.store.getState()
Notice the children.props difference from what #josh had mentioned.
According to its GitHub repository for other browsers use remote-redux-devtools.
What I'm trying to do is have some testing assertions based on the data in the Angular service, i.e. we're trying to create E2E tests and the tool we're using allows us to execute arbitrary JavaScript code for assertions, so for that I need to know if it's possible to get access to the Angular service instance.
How can I get access to an Angular service instance from plain JS code?
That is, if my Angular app is deployed, and I open the app in the browser, then open Chrome DevTools, can I get access to the service instance of the my Angular service that was provided to all components?
I know it's possible to get access to your component by through ng.probe($0) etc. but not sure about services.
From what I have searched so far, it seems like we have to do use the Injector class and then use it's .get() method to get access to one of the Angular service instances but I'm not sure how would I get access to the Injector class/instance itself?
Here's what I tried: ng.probe($0) ($0 being the <app-root> of my app) and then I see that the return value has an .injector property, I tried to call ng.probe($0).injector.get('MyServiceName') and got an error for: Uncaught Error: No provider for MyServiceName!.
(Even though I'm trying ng.probe above, I would love to know how to get access to the injector without ng.probe because during execution of the automated testing i.e. prod mode, I don't think I'll be able to do ng.probe($0))
So I'm not sure if I'm trying to access it the right way? Any ideas?
I'm using Angular 4.
This works for me in Angular 7 using ng.probe():
window.ng.probe(window.getAllAngularRootElements()[0])
.injector.view.root.ngModule._providers
.find(p => p && p.constructor && p.constructor.name === 'MyServiceName');
And I guess it is not possible to do it another way without ng.probe()
Using Ember debug Chrome extension, I have identified this component in a website I am trying to automate (but do not have direct access to change the code):
<MYAPP#component:zipcode-field::ember592>
Which is shown in hierarchy as:
application
engine
myui
zipcodeField
If I edit the value property of that element in the debugger, it updates the UI and model as desired. Can I do this via a one-liner from the console?
Update: So far, I am able to enter this in the console:
Ember.lookup.$E.container.lookup("MYAPP#component:zipcode-field")
But unable to access/alter its value property as in the debugger.
Update:
In feedback to one of the answers, my aim is to have a console one-liner, which could be given to someone without any debuggers installed in order to run the code with the same behaviour. Using a variable such as $E within the console requires that the element has been manually selected prior to running the code, which would not be sufficient.
Correct me if I am wrong but it seems that you aren't using the ember inspector (available on firefox and as a bookmarklet).
Once you have that installed it is really easy to inspect debug and modify anything ember related, for the purpose of this answer I will be using the chrome version.
Open up your chrome dev tools in the tab that has your ember app running,
once there head to the ember tab in the developer tools.
In order to see the components you will have to tick a checkbox
Once enabled you will be able to see all of the components currently used.
Clicking on a component will open up a panel that contains all of the component's properties.
In order to access those properties from the console all you need to do is click on the $E next to the components.
Once clicked you should see something similar in the console.
Ember Inspector ($E): Class {helperName: (...), logout: (...), isOpenBinding: StreamBinding, currentUserBinding: StreamBinding, _morph: Morph…}
Now all you need to do in order to get the property values:
$E.get('myProperty');
And To set them:
$E.set('myProperty', newValue);
A component is just a view, so the following should work:
Ember.View.views[<GUID>]
So in your example:
Ember.View.views['ember592']
You need to use get/set if you want to modify/read the value property, for example:
Ember.View.views['ember592'].get('value')
Ember.View.views['ember592'].set('value', 'newValue')
Found a gist that works with Ember 2.13
App.__container__.lookup('-view-registry:main')[componentId]; // componentId i.e. "ember4322"
Credit goes to ngyv: https://gist.github.com/ngyv/819e2cc78eca2a3b19599707e1461205