According to this article:
Debugging React performance with React 16 and Chrome Devtools.
I want to inspect some performance things of my own website built by React as well.
But I cannot see the User timing section in my DevTools.
Chrome version with 62.0.3202.89 in my computer,
am I missing something?
I was able to make this work by appending ?react_perf to my url. Not sure why this was so difficult to find... hope it works for you.
https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline
The User Timing tab was removed from chrome in favour of the "Timings" tab which combines some well known timings, such as LCP, OnLoad Event and custom User Timing API marks/measures.
You need to add ?react_perf to the URL
It's required if you're using React 15
https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline
Not required for React 16 though
https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab
Related
I want to write a browser for some purpose using electron and I choose the <webview> tag to emulate the browser page.
It has a toolbar which contains back forward refresh buttons.
I bind the new window event, in the handler I just create a new <webview> tag for that url.
However, I found that there are some limits.
1. window.opener in new <webview> is null
2. <form> with method="POST" can't be handled correctly, because there are no solutions to get postData from new-window event.(But there is probably a PR for this: https://github.com/electron/electron/pull/19703)
Perhaps I'm wrong from the start. I shouldn't use electron for this purpose? But I don't know much about c#/c++...
I do not recommend to use <webview> at the moment as its usage is strongly discouraged by the Electron team. The recommendation is to use a BrowserView instead (see documentation).
Using Electron to build a web browser should work fine, there is actually a similar project called Wexond. You could check it out as a starting point for your own browser.
According to MDN the correct approach is to send the header:
Link: </images/big.jpeg>; rel=prefetch
So my express syntax is:
res.header('Link', '</images/big.jpeg>; rel=prefetch');
and I see it land in my browser as:
Link:</images/big.jpeg>; rel=prefetch
But chrome never attempts to download the image.. The meta and link approaches work fine..
Am I setting the header wrong or is the browser failing to process the header value?
UDPATE: Okay so it looks like I'm doing things right but Chrome 43 & Chromium 43 on Linux/Ubuntu doesn't have support for this yet. This is working fine in Firefox 38..
Could it be that Chromium is just not showing the prefetching in the Network tab?
UPDATE 2: So it does look like Chrome/Chromium is hiding the file transfers from the Network tab. If someone can confirm this I'd appreciate it..
To set prefetch for one file in Express 4+..
res.set('Link', '<static/js/file1.js>; rel=prefetch');
For multiple files.
res.set('Link', '<static/js/file1.js>; rel=prefetch, <static/js/file2.js>; rel=prefetch');
Do NOT attempt to test this in Chrome, Chrome will lie to you and show it as not working if you investigate under Network tab. Always test with Firefox.
You can see me implementing this in a larger project in context here.
In a system I have to maintain (didn't build it, just inherited it) we have a Foursquare implementation that hasn't been used in quite a while. Trying to revive it failed, because our page is now loaded via HTTPS, which it didn't used to be.
We are using the "Save to Foursquare" button as well as the API request to retrieve the number of Check-ins. I already switched all the JS includes and intent links from http to https and at least now it shows the number and the button correctly.
However, I can't click the button and checking the browser's console I found that it added a script tag to the head of this page which tries to access http://platform.foursquare.com/js/modules/widgets.asyncbundle.js. The browser obviously blocks this, because it's not using HTTPS.
The file we are explicitly loading is https://platform.foursquare.com/js/widgets.js. It seems to me like this script is not reacting correctly to HTTP vs. HTTPS. There is probably a very simple solution to this, so what am I missing?
I don't know if you've tried it yet but the foursquare website says this on the matter:
Change the source of the JavaScript file to https://platform-s.foursquare.com/js/widgets.js
Add {"secure":true} to the global configuration block (window.___fourSq)`
The same link (see below) has all the different ways to call the Save To Foursquare function using its .saveTo() function.
https://developer.foursquare.com/overview/widgets
I hope this information and links helps! Cheers.
The Heroku app i'm trying to get to work (code here):
https://github.com/heroku/facebook-template-nodejs
"Unsafe Javascript attempt to access frame with URL" errors occur when the page is loaded in chrome.
The login button takes you to facebook but does not actually log you into the app and gives the same errors.
Has anyone got this app to work on Chrome or can anyone advise as to how to patch it up?
P.S. it seems to work fine on Mozilla.
Almost certain this is a cross domain policy issue, as stated above. Generally speaking, you just need to add the correct header info to the response.
Access-Control-Allow-Origin: *
In Node, I think it is just a matter of adding it as another header in the response, using
response.writeHead
See http://nodejs.org/api/http.html#http_response_writehead_statuscode_reasonphrase_headers
Oh, and there's explicit instructions on how to do it if you're using Express. I see no reason why it can't work using plain old node then.
http://enable-cors.org/server_expressjs.html
So I looked at your link, in your case I think you just have to enter the header info prior to using any other express app methods.
As to why it works in Firefox and not Chrome, not sure. Both support CORS many versions back. Maybe you have some Chrome extension that's interfering.
I find that when I am doing web development there are a few browser plugins that are very useful to me.
For Firefox I am using:
Firebug - Great for inspecting the HTML elements and working with CSS.
YSlow for Firebug - Developed by Yahoo! and gives timing and tips about page resources.
Live HTTP headers - Lets you inspect the headers that are sent to your browser.
For IE I am using:
Fiddler - "a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet"
I am always looking for other great tools to use. So what is everyone else using?
In addition to what you have:
Web Developer toolbar adds alot of extra functionality (cookie, form, image inspection, viewing generated DOM, etc).
HTML Validator - great for a quick check to make sure your pages are valid. Also good when there are display errors, you can quickly see if it's from improperly generated HTML.
ColorZilla - I use this alot to pull exact colors from a page to the clipboard.
Fireshot -- takes screenshots and annotates them convieniently, helpful.
Extended Statusbar modifies the status bar to show speed, percentage, time, and loaded size (useful for seeing how many images are being loaded, page weight, etc)
ShowIP Displays the IP address of the current page in the status bar
external IP Displays your external IP address in the statusbar
On a side note, I also find it useful to run these extensions in FirefoxPortable, so that I've got a browser setup specifically for development work with the relevant extensions installed, and to avoid slowing down or destabilizing my primary browser (eg. Firebug used to crash my browser all the time when accessing Gmail).
URL Params (Firefox extension) to view the POST and GET parameters of a webpage. Useful for checking your forms.
HttpFox
The one that prevents you from accessing StackOverflow is pretty useful.
All of these are Firefox plugins.
Firebug for Javascript and CSS debugging. Firebug allows for example to examine DOM tree while javascript modifies it. Firebug is my main tool.
Live HTTP Headers for looking at what data actually is inside request and responses.
Web Developer toolbar contains smaller utilities. For example it can validate html and CSS.
Dust Me Selectors finds which pieces of CSS are unused.
IE Developer Toolbar
Venkman debugger for Firefox
Firecookie and console 2
How about twitterfox to help twitter with developer colleagues and friends.
MeasureIt
For getting exact size of items rendered on a page in FF.
Firebug - Also let's me see the JS requests being sent from one page to another and which data is being sent.
- I can see the data inside the JS variables
- Replaces Error Console. It also outputs in the statue if it has found an error, so I can inspect it.
- Good for seeing the structure of the html when developing AJAX application.