I want to take a screenshot of a React application webpage which opens at the following url when I run my application locally :
http://localhost:3400/someapi/email
I have unsuccessfully tried to take the screenshot with phantom (https://www.npmjs.com/package/phantom)
It failed because phantomJS has no support for ES6.
Also, I could not inject polyfill core.js (https://www.npmjs.com/package/core-js) to
the phantom js page with async await, as I am using Node v.6.9.1.
Any other alternatives/npm packages which makes this process of taking screenshot of a react webpage easy for me?
**Any detailed example would be much appreciated!
Related
I am trying to create a custom dashboard on the angular app I am building. I want to use the data from Google Analytics 4 using Google Analytics Data API. I've successfully ran the scripts provided in their tutorial Using Node.JS client libraries (https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries?hl=en_US).
I've ran the quickstart script they have provided using Node.JS and was able to get the expected response. However, when I try to ran the same script on my angular app via importing the script to fetch returned values, "ng serve" returns webpack 5 errors.
The issue was importing the BetaAnalyticsDataClient. Whenever I import it, the nodemon returns webpack errors.
The structure is like this:
simple component structure
I have a 'site-statistics.component' with its html and scss files.
I have a script named 'google-analytics.ts' inside the subfolder "services".
site-statistics.component imports an exported function from google-analytics.ts
If the issue is my usage of the Google Analytics Data API client library, I want to know how I would be able get the response from the script and send it to my angular component.
Options I've tried, but failed:
Tried adding a resolve.fallback on webpack.config.ts. However, issue still persists.
Tried setting paths to each packages on my TSCONFIG.JSON.
Tried using react-scripts-rewired
If the issue is the way I use the Google Analytics Data API client library, I want to know how I would be able get the response from the script and send it to my angular component.
I would like to include a JS library into my react app. This is really frustrating to include a simple script tag. However I am a newbie in react so might be I am doing an incorrect way.
The library is a TradingView library downloaded from Github. For this I tried many method but I am failed to include. After inclusion the correct path goes to 404. Let me explain what I did:
I put the library code in root folder and created a relative path and put the code in componentdidmount through document.createElement method.
I created an hook and included that but its going to 404. Ref: link
Tried with React-Helmet but same error. Ref: link
There are some more method I tried but none of them is working. Please help me out.
In my nwjs application i am using React to build my UI. Currently, React is being loaded via a <script> tag in the main file, index.html. index.html has another <script> tag which loads main.js containing code which defines and renders my React components as well as requiring (require()) a few Node modules such as "fs" and "McFly".
This all seems to be working, however when i try using another node module (react-inlinesvg) i get an error, "document is undefined".
Having looked online for help, i have come to the conclusion that React now believes that it is being run on the server? Which is odd, as before i started using the react-inlinesvg module it was happily rendering components using React.render (clientside rendering).
If you need any more context or information then please ask.
It could be that you are rendering on the server side, or also that you are rendering both sides. In the second case you could simple nest the line that is causing you error with:
if (process.env.BROWSER) {
the line causing the error
}
If the error disappears, it means that you are on the server side also!
I hope this helps...
Basically if you code is universal (or isomorphic, if you want...) with this check you can execute the code only on client side, you want to do this to use a particular style-sheet for example:
if (process.env.BROWSER) {
require("../style/main.scss");
}
Naturally if you want to do stuff server-side you can check
if (!process.env.BROWSER) {
}
if any one face this he can solve it in 2 ways:
Solution 1: if you are using nw.js 15 or above try to enable mix context mode:
in your package.json add this flag:
"chromium-args": "--mixed-context"
Solution 2: expose document to the global object using this hack:
global.document = window.document;
I'm looking for a way to output Node variables directly into the google chrome browser console. The same way a console.log() works on the client side. Something like this for php. This would greatly speed up development.
NOTE:
Since the old answer (written in september 2014) refers to an older version of node-inspector, my instructions are not relevant anymore in 2017. Also, the documentation has gotten a lot better, so I have updated my original answer:
node-inspector is what you need.
It opens up an instance of Chrome with its developer tools for debugging.
It's also easy to use:
1. Install
$ npm install -g node-inspector
2. Start
$ node-debug app.js
Source: https://github.com/node-inspector/node-inspector
You might want to try NodeMonkey - https://github.com/jwarkentin/node-monkey
I know it's an old question but came on top of my Google search so maybe somebody will find my answer useful.
So you can use node --inspect-brk index.js
Now, all you have to do is basically just type chrome://inspect in your Chrome address bar and click Open dedicated DevTools for Node
In DevTools, now connected to Node, you’ll have all the Chrome DevTools features you’re used to:
Complete breakpoint debugging, stepping w/ blackboxing
Source maps for transpiled code
LiveEdit: JavaScript hot-swap evaluation w/ V8
Console evaluation with ES6 feature/object support and custom object formatting
Sampling JavaScript profiler w/ flamechart
Heap snapshot inspection, heap allocation timeline, allocation profiling
Asynchronous stacks for native promises
Hope that helped.
The closest thing to this I've seen is Node JS console object debug inspector
See this post for usage and potential issues: http://thomashunter.name/blog/nodejs-console-object-debug-inspector/
For users with nodejs on linux via ssh-shell (putty):
Problem with nodejs on linux-ssh-shell is, that you have no browser connected.
I tried all this solutions, but didnt get it to work.
So i worked out a solution with firebase (https://firebase.google.com), because my project uses firebase.
If you are familiar with firebase, than this is a great way. If not, firebase is worth using in combination with nodejs - and its free!
In the server-side-script (started with node) use a own function log():
// server-side:
// using new firebase v3 !
var fbRootRef = firebase.database();
var fbConsoleRef = fbRootRef.ref("/console");
var log = function(args) {
fbConsoleRef.set({'obj': args});
}
// inside your server-code:
log({'key':'value'});
On client-side you create a firebase-reference on this console-object:
// client side:
fbRootRef.child('/console').on('value', function(d) {
var v = d.val();
console.log(v);
});
Now everything logged on server-side with the log() - function is transferred in realtime to the firebase-database and from there triggering the client-console-reference and logged into the browsers console.
If anyone needs help, i will explain in more detail and could give a more extended version of this logging with types (console./log/warn/info), grouping with title-info (i.e. server says: (filename + line).
Setting up firebase for your project is done in max 30 minutes, inserting the console-function in 30 minutes. I think its worth the time!
You can use bonsole, a simple way to log something in browser. Even in Linux, you can go to the LAN's ip to check it.
The most simple way with least dependencies is using a WebSocket connection to send the messages to the browser. Any WebSocket example you can find on the internet will suffice to accomplish this. Everything else requires to be heavily integrated into the host system and wouldn't work if you want to actually run this on a remote server. You can also send commands to the server directly from the browser console this way.
Links:
https://www.npmjs.com/package/websocket
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications
I am writing a node.js app in coffee-script using the express framework. After exploring a couple of options I finally decided to use mocha and zombie.js. However, I am having a hard testing the UI. For example, to implement a successful user authentication I do the following: see the code pasted here my_gist
What I really wanted to do is the following:
call get '/sessions/new', which will call the SessionsController and display the authentication form
then I'll call the browser.visit method, enter the values for the fields and submit the form, which will generate a post method
if the username and password are correct, I'll expect the SessionsController to react accordingly and redirect to the right page.
Unfortunately, whenever I run the tests it complains about Zombie: require is not defined ReferenceError: require is not defined. It turns out it doesn't like the two lines in my /javascripts/app.js
require("coffee-script")
require('./tfs.coffee')
Even when I try to extract any information from the browser after the visit method, I just get undefined values. Apparently none of my assertions is being tested. It just passes the test. Is there anything I am doing wrong? Has anyone testing coffee-script written app in express using Zombie.js faced that problem? what could be the fix?
If /javascripts/app.js is being loaded from the browser, you would want to make sure that RequireJS (or some other browser framework that defines require) is loaded first, or load them in your HTML document:
<script src="coffee-script.js" type="text/javascript"></script>
<script src="tfs.coffee" type="text/coffee"></script>
You might need to wait until the page is fully loaded before extracting values.