How can you change the "view" of a Javascript object/function for debugger purposes in Chrome? - google-chrome-devtools

Is it possible to change how google chrome views the collapsed form of objects for debugging? I've heard reference to creating functions called toString but I was unable to get them to work, so assumed that those questions were somewhat dated.

Related

How to use IUIAutomation::ElementFromPoint to get deeper web elements

I would like to obtain elements on my web browser (Chrome) using the IUIAutomation::ElementFromPoint method.
https://learn.microsoft.com/ja-jp/windows/win32/api/uiautomationclient/nf-uiautomationclient-iuiautomation-elementfrompoint
When I call the ElementFromPoint method with the point shown below, I can only get as far as the Chrome window.
But once I've used the Inspect tool, I can get to the deeper elements when I call the same method.
I am hoping to do the same with my tools.
How do you use the ElementFromPoint method to get the deepest web elements?
Before using inspect tool.
After using inspect tool.
Get from point only returns the topmost window around the cursor.
To go lower you have to drill into the components and check that their bounds contain your cursor position (I know, but it’s not as slow as you’d think).
Make sure you’re using either a raw tree view walker or at least a control tree view walker.
Firefox and chrome (and I guess the new edge) require that your code Is signed to drill into web pages (otherwise you could be building something to steal card info etc) - so triple check what your program performs like when used on a machine that it wasn’t developed on , in release mode, and not on an admin account.

Get Reference to top level ReactJS Component

So I am trying to inject some javascript into a website to scrape some information. However, if I could get a reference to the react component my life would be made a lot easier. I have looked at several questions on Stackoverflow but nothing useful turned up:
Reactjs - Get a component from anywhere in the app
React - get React component from a child DOM element?
I realize that react is basically just rendering the DOM by using its internal state and so reversing the DOM is not an option. Moreover, since the javascript on the website isn't mine I can't exactly have a global reference to the React component when its created. What I would really like is to have the '$r' that the react chrome devtools provides when you choose a DOM element but without having to rely on the chrome extension. I guess my question really boils down to how can I get the same representation that the chrome dev tools does so that I can reference a react component without actually creating a global variable. Also note I don't really care about efficiency or best practices I just want the reference to the component the same way that the devtools does it.

How to communicate between multiple windows of the same chrome app?

When using chrome developer tools, it appears that each app window (and the background 'page') has its own javascript context (space of objects, thread of execution), and yet the createdWindow callback of chrome.app.window.create apparently provides direct access to the objects of the 'other' window that was just created.
Given that, I'm unclear on the best way to communicate between windows; e.g. if I open a second window to act as a dialog box, when the user clicks OK to save changes, should I be using postMessage, sendMessage, or just call a function on an object in the main window. I've looked at the messaging samples, and they seem focused on communication between two different apps, or between an app and an extension.
So, I'm seeking a clear description of the memory and execution model within one app. Are there really separate contexts, or is it just one space of objects, with one thread of execution? What is the best way to communicate between windows of the same chrome app?
That is a great question James!
Multiple chrome windows are not completely separate. They share a single thread and object space, however the window object is different for each. In javascript unscoped references to things are looked up on the current window, so this makes the windows appear to be different object spaces - but they are not really.
So, you can reach into another window and execute a function there, or manipulate state in other ways (e.g. set a variable on another window to a function from the current window) and it is acceptable and supported.
You might find the chrome.app.window.getAll() and chrome.app.window.get() methods useful. They are however new to Chrome 33 which is not yet in the stable channel.
As an alternative you could hold an array of opened AppWindow objects in the background page context.
You can then get a reference to the background page context from any window using the chrome.runtime.getBackgroundPage() method

How can I program a button on an Access form to link to a browser window that looks up multiple addresses on Google Maps?

My problem is very similar to the one posted here:
http://www.utteraccess.com/forum/Plotting-Addresses-Maps-t1968130.html
except that thread never found any solutions. Basically, I'm working on an Access form that has a datasheet as a subform. Upon clicking a button on the main form I'm trying to make it so that a browser window opens up and, using the address columns from the spreadsheet data in the subform, plot all the address markers listed. I've looked up a lot of ways to attempt this but I've yet to find a way that seems to work.
I'm not even sure if it's possible to plot multiple markers on Google Maps, but according to research (and after trying it myself) it seems like it isn't, although I don't want to rule it out entirely because I'm still not 100% sure. However I know both Google Earth and batchgeo.com do allow this. I still want to try and do this on Google Maps, but if that doesn't work I want to try to do it using batchgeo.com and if that still doesn't work, then Google Earth (I don't want to make the user download external software if possible).
If it helps, from what I've read API's seem like a useful tool, though I'm not sure how to apply it to an Access form, it seems more like a way to embed to already existing websites.
I'd really appreciate if someone could help me figure out how to approach this problem!
Maybe this would help?
http://ramblings.mcpher.com/Home/excelquirks/getmaps/mapmarkers
It is Excel but should be translatable.
Here is another example, this time using Access:
http://www.utteraccess.com/forum/Google-Maps-Multiple-Mar-t1973499.html
...from what I've read API's seem like a useful tool, though I'm not
sure how to apply it to an Access form, it seems more like a way to
embed to already existing websites.
You're right. There's no way, that I'm aware of, to embed a Google Maps object in a form (like an ActiveX control). Microsoft MapPoint is a software product that lets you do Map integration by way of an ActiveX control (no need to use HTML and/or javascript).
What I usually do on a project like you're working on is I get my HTML page working the way I want it to, outside and independent of MS Access. You should be able to program and test the HTML file locally without having to use an actual web server. Just use something like NotePad++ or Sublime Text Editor 2 to write your HTML and Javascript and then open the file in your browser to see if it works. I'm quite sure you'll need to use Javascript in your HTML page to make this work. That's what the Google Maps API is all about.
After you have your webpage working, then you will have to go into Access and write code to create that web page on the fly with the address data for the current data set. You can just write it out to the Windows Temp folder and then open your browser control that that web page.
Julian Knight's answer links to more specifics on how to create the HTML page on the fly. It looks like gobble-de-gook, mostly because it is. Outputting HTML/Javascript/CSS from VBA is far less than optimal. This is why you troubleshoot it outside of Access, as much as you can.

gwt typeahead missing

I have a GWT app with a bunch of textboxes. In firefox I would expect that when I type a word in a textbox that I have already typed in and submitted, that firefox would offer to autocomplete that text. But for this GWT app it is not happening.
The ids and the name of the html elements are the same everytime. I don't know if it makes a difference, but I am using UiBinders for presentation.
Also in IE it seems that none of my css stuff is loaded. And when I IE developer tools on my GWT page, it can focus in on any of the textboxes it just focuses on the encompassing DIV around all the textboxes.
The problem with autocompletion is caused by how the DOM tree is created in a dynamic web application, such as the one created using GWT. Basically, all the DOM elements (textboxes, etc) are dynamically created, after the page is loaded. However, AFAIK, the browser only supports autocompletion on "static" elements, ones that are part of the HTML host page. So, for that reason you won't get autocompletion support from your browser in a GWT app. Fot some cases, you can still emulate it via SuggestBox.
You could try including the elements you want autocompletion for in your HTML host page, and then wrapping your GWT Widgets around them - that might work :) But it's not the "prettiest" solution, since you probably want autocompletion for a number of unrelated fields/elements.