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.
Related
I am learning node and wrote a simple app which returns just JSON data as response.
There is no any error but I am not getting why there are 5 different resources (content.min.css, favicon.ico, jsonview-core.css, options.png, etc) showing in my network tab. Can anyone help me to understand this.
If possible how can I avoid sending these extra resources and just send the JSON data?
It's because of the chrome extension that I am using.
I found some interesting about favicon.ico file:
Modern browsers will show an icon to the left of the URL. This known
as the 'favicon.ico' and is typically fetched from
website.com/favicon.ico. Your browser will automatically request it
when browsing to different sites. If your browser receives a valid
favicon.ico file, it will display this icon. If it fails, it will not
display a special icon.
I currently use this
mywebview.setUrl(the_url);
to load a URL.
Can I, instead, load it in such as way as to include a referer in the http header?
EDIT: The reason for this is that the linked-to website should be able to see where the traffic is coming from even if the URL is loaded into a different webview than the one that contained the link. (I use multiple WebViews to create a tab UI.)
Edit:
The xcode equivalent seems to be this, although I'm not sure if this is also loading it into a new webview: Specifying HTTP referer in embedded UIWebView
It appears defining custom headers for WebViews is not available yet. You can watch ticket TIMOB-17467 to view updates.
It appears you will need a native module.
A quick check for iOS..
Safari Dialog module doesn't support headers (class limitation).
WKWebview module doesn't support headers (appears to be possible).
Perhaps you could extend these.
Android appears to be easier to implement, (but still not available in Titanium SDK), via extraHeaders: Read more: https://stackoverflow.com/a/5342527
I've looked at the Android Webview header (php getallheaders()) and there is x-requested-with: com.app.id
So in you page you could check for that value and know at least that it was visited by the app with the bundle identifier. Otherwise you could attach a get parameter to the url ?mobile and count this.
I'm trying to add a patch to the Android SDK and add a setHeader() method. The loadUrl() call is at:
https://github.com/appcelerator/titanium_mobile/blob/bc85170157d3bebc5de1d61a9fe6e34bce84a8c9/android/modules/ui/src/java/ti/modules/titanium/ui/widget/webview/TiUIWebView.java#L462
If you change it according to #tzmartin
extraHeaders.put("Referer", "http://www.referer.tld/login.html");
getWebView().loadUrl(finalUrl, extraHeaders);
then it already works but its hard coded.
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.
How can I perform a post through the chrome extention, lets say I want to send the current tab page title to a webpage
You can do POST XHRs from chrome extensions to any URL, as long as you have host permissions defined in your manifest. See these docs.
In a chrome extension the best way to try and do what i think you want is via a content script see documentation a word of warning however pinging your server with a POST request every time someone with your extension installed opens a web page is going to be extremely heavy going on your servers especially if you have a lot of installs. A possible solution is to use the content script to keep tally of the sites a user visits and save this data in a HTML5 database (wich chrome supports) then using background.html sending the data at given intervals in bulk with an AJAX request, this will significantly cut down the number of times your server is pinged.