I know that chrome devtool could be used as an open debugger frontend, with receiving debug info by a websocket from debugger host and displaying them such as source file and console log, it also supply a flow-control GUI for single step task as long as the host supports.
but according to the ReactNative's remote debug page:
React Native JS code runs as a web worker inside this tab.
it seems that the chrome is not only a frontend but also executes the code being debugged? so my question is:
1.how can the device-dependent code be executed in chrome?
2.will the device also execute code ? if it is, what's the relationship between it and chrome? if not, how does the app run in device?
1.how can the device-dependent code be executed in chrome?
In case of Chrome debugging mode, the JavaScript code runs within Chrome itself (instead of the JavaScriptCore on the device) and communicates with native code via WebSocket. Here, it will use the V8 engine. This allows us to see a lot of information on the Chrome debugging tools like network requests, console logs, etc.
Source: React Native Made Easy
Note that Chrome's V8 Javascript Engine is not the only React Native can use, you could debug in Safari as well and the code would run on Safari's JavascriptCore. See this for more
2.will the device also execute code ? if it is, what's the relationship between it and chrome? if not, how does the app run in device?
No, the JS code executes only in one place, either the browser's javascript engine if you are debugging, thus communicating with the device via Websockets, or the JavascriptCore of the device if running without debugging.
Related
I am building a chrome extension that is supposed to aid in the debugging of software that runs on top of a website. This software can have a debug mode enabled that will cause a lot of output to the console using console.log.
I want to use my chrome extension to parse the console messages and show the important events in the UI for quicker debugging. However, I am not seeing a way to simply do this with the API. Is there something I am missing? Should I override the console.log function? How would I go about doing that?
There are two methods.
Override console.log, console.warn, and so on, in page context (this is important!). There are lots of examples (here's a random one). In your case it'll be even simpler as you'll just call the original method and transfer the arguments via CustomEvent to your content script (example), which will accumulate them.
Use chrome.debugger API with Console.messageAdded or Runtime.consoleAPICalled events. This will show a message bar in the entire browser about debugger being active unless you hide it globally by running chrome with --silent-debugger-extension-api command line, but that's somewhat dangerous if you accidentally install a malicious extension that uses chrome.debugger API.
I'm using Puppeteer for some testing tasks, and am a bit confused:
Does Puppeteer run the JavaScript it encounters? Specifically, our app fires of a bunch of requests (eg. loading Stripe, Facebook, etc), and I want to ensure that code is being run during a Puppeteer request.
Does Puppeteer run JavaScript on the page?
Yes, it does.
Does Puppeteer run the JavaScript it encounters?
Yes, it does.
JavaScript is enabled by default:
While Puppeteer's documentation does not explicitly say that JavaScript is enabled by default, their tutorial documentation does say that it launches Chrome in headless mode by default, and Chrome's headless mode has JavaScript enabled by default, therefore Puppeteer has JavaScript enabled by default).
You can enable or disable it with page.setJavaScriptEnabled(boolean): Promise<void>
https://pptr.dev/#?product=Puppeteer&version=v5.2.1&show=api-pagesetjavascriptenabledenabled
You can check if it is enabled with page.isJavaScriptEnabled(): boolean
Specifically, our app fires of a bunch of requests (eg. loading Stripe, Facebook, etc), and I want to ensure that code is being run during a Puppeteer request.
Use Puppeteer's Code Coverage feature to test that your JavaScript is actually executed, including the lines and functions you want to run.
This (unrelated) blog page has an example.
What I'm trying to do?
I am trying to write an application based on such schema:
The chrome extension launches an application (.jar file) on my computer
The application launches another application (external, not written by me), I am passing data to it, it displays the window for user, user enters some data to it, and then this app returns the data to the parent app
The parent app processes the child app response and sends it back to the chrome extension
What's wrong?
When the window of the child app is displayed, the chrome extension is disconnected (it happens exactly at the same time). What follows, the result is not going back to the chrome extension.
What works:
If I omit point no. 2 (just mocking the answer from the child app), the result is returned to the chrome extension.
Including all points: the child app returns it's result correctly. The parent app catches it and tries to return it to the chrome extension (not succeeding, the extension is disconnected)
Also tried
I tried to do it using java multithreading (ExecutorCompletionService, Callable, Future), I wanted to launch the child app in a separate thread and block the main thread until the child is finished, it didn't help.
Solved!
The communication between the chrome extension and my app is through the standard input/output. Somewhere in the code of my app (written in java) there was System.out.println called. It made some mess on STDOUT and made the app disconnect from the extension. It happened in the same time with launching the external app as I saw it, probably didn't happen exactly at the same time, but some time before/after, something the person cannot see.
Multithreading has nothing to do with this problem.
Solution
I found and removed all code writing to standard output
I am looking for a way to interact with a web page and enter data to certain fields in it using an external program that interact with Firefox (or Chromium) web browser. The best I could find is the console commands for the browser, but they only let you go to a certain URL and not interact with the pages' content. I have also tried looking for some extension to do the job but I could not find any. Any suggestions?
You could create Chrome extension that communicates with your application via Chrome Native Messaging API: https://developer.chrome.com/extensions/messaging.html#native-messaging
Take a look at Selenium and the tools mentioned at Selenium alternatives?.
Basically what I need is a way to automatize the result of the following operations:
open a new tab;
open the Network tab in the developer tools;
load an URL;
select "Save All as HAR".
Often, proposed solutions involves the use of PhantomJS, browsermob-proxy, or pcap2har; those won't fit my case since I need to work with SPDY traffic.
I tried to dive into the Google Chrome Extensions API and indeed I managed to automatize some tasks, but still no luck for what concerns the HAR files generation. Now this method is particularly promising but I still can't figure out how would I use it.
In other words, I need something like this experiment from the Google guys. Note the following:
We used Chrome's remote debugging interface with a custom client that starts up the browser on the phone, clears its cache and other state, initiates a web page load, and receives the Chrome developer tools messages to determine the page load times and other performance metrics.
Any ideas?
Solution
For the curious, I ended up with a Node.js module that automates such kind of tests: chrome-har-capturer. This also gave me the opportunity to dig deeper into the Remote Debugging Protocol and to write a lower-level Node.js interface for general-purpose Chrome automation: chrome-remote-interface.
The short answer is, there is no way to get at the data you are after directly. The getHAR method is only applicable to extensions meant to extend DevTools itself. The good news is, you can construct the HAR file yourself without too much trouble - this is exactly what phantom.js does.
Start Chrome with remote debugging
Connect to Chrome on the debugging port with a websocket connection
Enable "Network" debugging, you can also clear cache, etc - see Network API.
Tell the browser to navigate to the page you want to capture, and Chrome will stream all the request meta-data back to you.
Massage the network data into HAR format, ala phantom.js
...
Profit.
For a head start, I have a post that with sample Ruby code that should you get started with steps 1-4: http://www.igvita.com/2012/04/09/driving-google-chrome-via-websocket-api/
By now there's a browser plugin to do that: https://github.com/devtools-html/har-export-trigger
It uses the WebExtensions DevTools API and I got it to work with both Firefox and Chrome.
See my code for Chrome here: https://github.com/theri/web-measurement-tools/blob/master/load/load_url_using_chrome.py#L175
Automatically installing the plugin in Chrome is a bit more complicated than in Firefox, but feasible - I extracted the plugin archive locally and then link to it in chrome_prefs.json (see same repository).
Not sure if it helps, HAR Recorder uses chrome debug protocol to record HAR and generate a har file (without opening devtools). If you want a variation, you can fork and make changes on it.