I find a interesting website:http://www.brightpointinc.com/interactive/political_influence/
I want to learn its visualization using d3.
But when I download it, using right click button-------- save as The download page seems does not work. It seems lack some data, so I get back to the website to download some data, but it lacks some of them, can anyone send me an work version? thanks
As Lars says, your best bet is to look at the source code. To do this, you can use something like Chrome Developer Tools or Firebug for Firefox. I use the latter, so I'll take that as an example.
First, I'd right-click on the visualization itself, and click on Inspect Element with Firebug. This will pull up the HTML, which is only semi-helpful, since it only shows the output rather than the JavaScript code which created it.
To get at the JavaScript, you can use Firebug's Script tab. Most websites have more than one script, so you can hunt through the scripts being used by browsing through the dropdown menu in the second toolbar. The _buildChords.js script looks the most promising; that has some recognizable d3 code in it. You could check out the others to see what else they're calling (since it looks like there might be others - data.js, events.js, and so on).
Happy learning.
How do you debug panel's html?
I think the DOM inspector should allow you to do this.
https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/
https://developer.mozilla.org/En/DOM_Inspector
Although it doesn't have a console, you can use the inbuilt Scratchpad (Shift+F4) to run some js manually. You need to enable access to chrome-scope first though. More info here: https://developer.mozilla.org/en/Tools/Scratchpad#Using_Scratchpad_to_access_Firefox_internals
If you mean, how do you inspect html elements in a Panel using Firefox dev tools or Firebug, the answer is unfortunately that you cannot do this - those tools do not support panels at this time.
Well, it seems there is no really a way to do it in the panel.
So the best way is to use a tab instead of a panel. In it theres no problem to easily inspect HTML.
Some minor shifts and quirks of panel can be dealt with later, by 'try and see' method.
I would like to create my firefox addon. I want to call a javascript that changes the src of the iframes.
I dont know how to build an addon that calls my function on BEFORE PAGE LOAD. Only I got is the main.js. I tried to insert alert('hello'); into it, but nothing happens. Is there any useful tutorial for this?
The best place to start is the Addon SDK documentation:
https://addons.mozilla.org/en-US/developers/docs/sdk/1.4/
In particular there is a getting started tutorial:
https://addons.mozilla.org/en-US/developers/docs/sdk/1.4/dev-guide/addon-development/getting-started.html
While it may not solve your particular problem with controlling iframe urls, it will give you a better idea how the SDK works.
Indeed one the most desirable things is get the DOM loaded. So generally we must wait until page is loaded (DOM).
That's why listener as the following are used so much:
window.addEventListener("load", function(){}, false);
appcontent.addEventListener("DOMContentLoaded", function docLoader(e){}, true);
So just call any function that you build. It will run before any page load.
To work in FF addon development helps a lot always make searches prefixing MDN (Mozilla Developer Network). Besides I recommend you read all this MDN: XUL School Tutorial. It start like this:
XUL School is a comprehensive add-on development tutorial, focusing on
Firefox extension development. It is recommended that you read through
all of it at least once. While Firefox changes rapidly, the content in
this tutorial should be up to date and valid.
When I debug locally in fire fox 2.0x many times my page won't have the styles added properly or the page will not completely render (the end is seemingly cut off). Sometimes it takes multiple refreshes or shift-refreshes to fix this. Is this a common issue or is it just me? Any solutions?
I want to add that this is happening in fire fox 3.x to me as well. I add my javascript to the pages dynamically and this might be part of the issue. This is when I am working locally with Visual Studio.
Update: This does happen in IE but it happens much more often in Fire Fox. The issue seems to be only javascript and CSS files not loading. For example I get jQuery is not defined, $ is not defined etc. I don't think I have local IIS to test this on but from the server it always works perfectly. Fire Bug shows all my css and javascript files to be requested and received.
This could be a problem with IPv6 and DNS of the Firefox browser. This issue is known to slow down Firefox on localhost:SOMEPORT. The effect would be that some external files won't load (css, js etc.) resulting in a partially rendered page.
You can solve this issue by simply deactivating IPv6 in Firefox:
Insert about:config in the Firefox address bar
Set network.dns.disableIPv6 to true or alternatively add localhost to network.dns.ipv4OnlyDomains
A different way to fix this issue, is to a remove the ipv6 address from your hosts file this way: open the file
C:\Windows\System32\drivers\etc\hosts
(with administrator privileges) and remove (or comment out #):
:: localhost
Make sure that you narrow the scope of the problem. Does the problem just happen when debugging from VS or does it also happen with local IIS? With server-based IIS? Does it happen to other developers in your company? Is it really just FireFox or does it happen to Chrome, Opera, IE, etc?
Assuming that you've already worked that all out, I would suggest installing a FireFox plug-in called "Tamper Data". Open that and refresh the page. You'll see a record of every connection from the browser to the server (for each html file, image, css file, etc). Look to see if any of the them are very slow or not completing (perhaps one of those files is taking a long time and FF is waiting for it to finish before loading other important files).
Assuming that all of the files correctly loads, you should consider checking that the syntax is valid (maybe there is some unclosed tag or quotation mark that is causing FF confusion). I use a plugin called "Web Developer", but there are a lot of other options out there.
You could also use a plugin called FireBug to view the HTML behind various parts of the page to see if there are any noticeable problems. You start FireBug, go to the HTML tab, click Inpsect, and move your mouse over something on the page, and it will show you the HTML behind it.
One thing to do would be to check the source of the page(s) in question. My guess would be that the local server that VS runs is not giving you the entire source of the page. One way to verify this would be to run exactly the same code in the debug environment, as well as from a "real" server like IIS 6. If the same behavior is seen on loading the page from both servers, as well as insuring that the full page source is being recieved by the browser(s), then it is a bug in Firefox and should be reported. This is especially true if other browsers, ie. IE, Chrome, Safari, Opera, render the page fully.
Are you comparing what you see in Firefox to what is displayed in the Visual Studio designer? If this is the case, then they are using 2 different methods to render the html and may not display the same.
Anything further on this folks?
I have examined the traffic using Firebug and it appears that when veiwing the response from the request for a style sheet, the response is just blank. After refreshing (sometimes multiple times) the age displays correctly and the response information contains the style sheet. I have not seen this in any other browser and it only occurs when viewing the app from Visual Studio.
2! Recently i had the same problem. Im using MVC 1.0 and I added a new stylesheet into Views/Share folder. And when i run the project, the page didnt render along with the css. If your web project is a MVC one so try put the css file into the Content folder.
Hope this help.
HaiVu.Doan.
In case anyone else finds this with newer versions of Visual Studio, I have to run VS as Administrator. This is something I keep forgetting to do, but once I right clicked on Run as Administrator when opening VS, the problem went away.
Initial problem, I could not get CSS to render when running a project from VS 2012 using Firefox as the browser. (IE worked just fine, btw.) The content would be there, but no CSS. This was the first post I found when I typed in my question.
What Firefox add-ons do you use that are useful for programmers?
I guess it's silly to mention Firebug -- doubt any of us could live without it. Other than that I use the following (only listing dev-related):
Console2: next-generation error console
DOM inspector: as the title might indicate, allows you to browse the DOM
Edit Cookies: change cookies on the fly
Execute JS: ad-hoc Javascript execution
IE Tab: render a page in IE
Inspect This: brings the selected object into the DOM inspector
JSView: display linked javascript and CSS
LORI (Life of Request Info): shows how long it takes to render a page
Measure IT: a popup ruler.
URL Params: shows GET and POST variables
Web Developer: a myriad of tools for the web developer
Here are mine (developer centric):
FireBug - a myriad of productivity enhancing tools, includes javascript debugger, DOM inspector, allows you to edit the CSS/HTML on the fly which is highly valuable for troubleshooing layout and display problems.
Web Developer - again another great developer productivity tool. I mostly use it for quickly validating pages, disabling javascript (yes I disable javascript sometimes, don't you?), viewing cookies, etc.
Tamper Data - lets you tamper with http headers, form values, cookies, etc. prior to posting back to a page, or getting a page. Incredibly valuable for poking and prodding your pages, and seeing how your web app responds when used with slightly malicious intent.
JavaScript Debugger - has a few more features than javascript debugger provided by firebug. Although I must admit, I sparingly use this one since firebug has largely won me over.
Live HTTP Headers - invaluable for troubleshooting, use it frequently. Lets you spy on all HTTP headers communicated back and forth between client and server. It has helped me track down nefarious problems, especially when debugging issues when deploying your web app between environments.
Header Spy - nice addon for the geeky types, shows you the web server and platform a web site runs on in the status bar.
MeasureIt - I don't use this all too frequently, but I've still found it valuable from time to time.
ColorZilla - again, not something I use all that frequently, but when I need it, I need it. Valuable when you want to know a color and you don't want to dig through a CSS file, or open up a graphics editing app to get a color embedded in some image.
Add N Edit Cookies - this has been a great debugging tool in web farms where the load balancer writes a cookie, and uses the cookie value to keep your session "sticky". It allowed me to switch at will between servers to track down problems on specific machine. Also a good tool if you want to try to mess with a site that uses cookies to track your login status/account, and you want to see how your code responds to malformed or hacked info.
Yellowpipe Lynx Viewer Tool - yeah I know what your thinking, lynx, who needs it, its so 1994. But if you are developing a site that needs to take web accessibility into account (meaning accessible to users with visual impairments who use screen readers), or if you need to get a sense of how a web spider/indexer "sees" your site, this tool is invaluable. Granted, you could always just go out and grab Lynx for yourselfhere's the windows xp port that I use.
I've got a handful of other addons that I've used from time to time that I'll just quickly mention: FireFTP (one I installed wasn't stable and I've not tried a newer release), Html Validator (also found this one unstable, least back when I installed like a year ago), IE Tab (I usually just have both IE and FireFox open concurrently, but that is just me, I know many others that find this addon useful).
I'd also recommend the Web Developer extension by Chris Pederick.
As far as web development, especially for javascript, I find Firebug to be invaluable. Web developer toolbar is also very useful.
The ones I have are...
Y-SLow
Live Headers
Firebug
Dom Inspector
One that wasn't mentioned yet is this HTML Validator extension that I found very useful.
#Flávio Amieiro
MeasureIt is an unnecessary extension to have if you install the Web Developer Toolbar. Web Developer Toolbar includes a ruler as one of its features. Under the "Miscellaneous" category for Web Developer click the option "Display Ruler" to use a ruler identical to the MeasureIt one.
That will allow you reduce the number of extensions needed by at least one.
Firefox addons:
FireBug:helps web developers and designers test and inspect front-end code. It provides us with many useful features such as a console panel for logging information, a DOM inspector, detailed information about page elements, and much, much more.
Web Developer-gives you the power disable CSS, edit CSS on the fly, measure certain areas of a page and much more.
ColorZilla
Just click on the icon, hover over the area you'd like to know the hex color for, and click.
Window Resizer
to make sure the layout is displayed properly in the standard resolutions of today.
Total Validator
validating websites much easier by checking HTML, links, CSS and doing a lot more.
Web Developer for web development. Scribefire if you're a blogger-progammer
For web developing I use the Web Developer Toolbar, CSS Viewer and MeasureIt.
But I'm really not one of those who has a thousand of extensions to do everything. I like to keep things simple.
EDIT: Thanks to Dan's answer I don't need MeasureIt anymore. Can't believe I've never seen that! I guess I'll just have to pay more atention to this WebDeveloper toolbar.
Adding to everyones lists, Tamper Data is quite useful, lets you intercept requests and change the data in them.
It can be used to bypass javascript validation and check whether the server side is doing its thing.
I use Web Developer, it's a real time saver.
+1 for LORI ("life-of-request-info"). It's a very convenient alternative for rough measurements of the load time of a particular web page -- the kind of thing that you might otherwise use an external stopwatch for.
New Tab Homepage. Combined with a "speed dial"-type homepage (a personal, fast-loading page of links that you use frequently), helps you get where you're going faster when you open a new browser tab.
LastTab. Changes the behavior of Ctrl+Tab to let you navigate back and forth between your most-recently-used tabs with repeated presses of Ctrl+Tab, the same way that Alt+Tab works in Windows. Also provides a nice view of all open tabs while Ctrl is still being held down for easy navigation. (The resultant behavior is very similar to the Ctrl+Tab behavior in recent releases of Visual Studio.)
FireFTP is good for grabbing/uploading any necessary files.
I find Hackbar to be quite useful. Very useful if you want to edit the querystring part of the url, to test for vulnerabilities, or just general other types of testing where you might end up with complicated query string values.
I was learning DOM inspector, but I've switched to Firebug.
Some of which has been missed above are here
Load Time Analyzer – View detailed graphs of the loading time of web pages in firefox. The graphs display events like page requests, image loading times etc.
Poster – A must have tool for web developers enabling them to interact with web services and other web resources.
Aardvark – A cool extension for web developers and designers, allows them to view CSS attributes, id, class by highlighting page element individually.
Fiddler is a really great debugging proxy. Think of it as a more powerful version of the "Net" panel in Firebug or the Live HTTP headers.
It used to be an IE-only extension, now it also has hooks into Firefox.
Groundspeed, is useful for testing server side code. It was created for input validation tests during pentest, but can be useful for any test that require manipulating input (similar to TamperData).
It lets you control the form elements in the page, you can change their type and other attributes (size, lenght, javascript event handlers, etc). So for example you can change a hidden field or a select to a textbox and then enter any value to test the server response and stuff like that.