Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I have read about extensions which allows us to edit and make changes to live website and see how it looks. This is specifically for user interface designing. But some how i am not able to find that plugin. Can anyone tell me how i will edit a live page of anywebsite
Firebug Addon for Firefox
Developer Tools in Chrome (accessed through Spanner -> Tools -> Developer Tools)
Both allow you to modify CSS and HTML content on a live webpage and instantly see the effects.
You can do this with Google Chrome easily: http://code.google.com/chrome/devtools/ There are other options as well (Firebug: http://getfirebug.com/)
A quick crash course using Chrome:
Ctrl + Shift + I brings up the developer tools (or use J instead of I to go straight to the command line). Alternatively, you can right-click anywhere on a page and click Inspect Element.
On the right hand side you can see style information. Uncheck boxes to disable things. Double-click items to edit them. The changes take place right before your eyes!
The command line is a big help for editing/debugging javascript as well (check out the buttons at the lower left).
That should be enough to get you started. Good luck!
There are some websites designed for A/B testing that let you do this:
https://optimizely.appspot.com/
http://www.reedge.com/
Just enter your website URL and it will take you to a visual editor where you can modify the page with drag-and-drop.
Firebug is what you're looking for (for Firefox).
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
Web page is getting fancier each day, while the basis of structure is all the same.
That is css box model.
So I wonder if there is any kind of tool to analyze a page with css box. That is:
1. input a page (url);
2. output the box structure of the page (png);
For example, the output could be something like:
With this, we can do a better review or rework on this web page. Right?
I will appreciate it if you could tell me something you know about this.
Firefox browser provides a 3D tool for detailed checking of web page. It is a very interesting tool. You can check it like this.
Open the web-page in firefox and right click anywhere on the page. Select the inspect element(Q) from the menu. It will bring a new window at the bottom of page similar to firebug window. You can find the 3d view button on the right side. Click it and drag your webpage, then it will rotate as you like.
Here is the sample screenshot for apple.com website
http://i.stack.imgur.com/2TuG6.jpg
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Closed 9 years ago.
Improve this question
I was working on web project, and when i pushed my changes, my files disappeared because of bad manipulations. Now, I've lost my files, but my page is still Firefox memory, so I could copy the HTML code. But I cannot copy the CSS ! I've tried to recover deleted file using Quetek's utility, but the files are corrupted, and in the css I could see "heade", "master"... But not my CSS. Please help me !! I didn't closed Firefox. Vinz243
You have just discovered why all developers need to use source control (Git, Mercurial, Subversion, etc.)
That said, this isn't really a programming question and doesn't fit well with Stack Overflow's guidelines. The latest version of FireFox (the only one I've checked) lets you choose "Web Developer" from the menu, then click on the "Style Editor" choice on the top of the newly opened area. In there, you can see the css resources it is using.
Firefox has a built in Inspector tool you can access by right-clicking an element and selecting Inspect Element from the drop down menu that appears.
From here you can select Style Editor menu to the right of the Inspector tab to view the css of the rendered page
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 9 months ago.
Improve this question
Anyone know of a way to have a split screen view in Notepad++ where I can be editing my HTML / CSS in one pane/tab and be seeing the Live Preview of what it would look like in a browser in another tab/pane?
Ideally, this would be:
in Notepad++ itself (using native panes/tabs as described above)
the user could configure whatever browser rendering engine (Chrome, FF, IE, etc...) they wanted to view the preview in
However, I could live with any variation of the two above, e.g. simply integrated with RubyMine using external windows/browsers, or maybe, the preview only available with limited rendering engines (only Chrome let's say).
The plugin Preview HTML is the closest match to what your are looking for.
Go to the Plugins menu and then find the Preview HTML entry to install it. Its description is: Preview HTML files inside Notepad++ (or in a floating window) without having to save them first. The latest update now refreshes the preview automatically after switching tabs, or whenever the document is changed.
More information in the official website.
I think you're looking for it，the"Preview HTML".
this is the Introduction：http://chiselapp.com/user/vor0nwe/repository/npp_preview/home
Well this is now 8! years old. But I'd thought I'd chime in. The author of the plug in is no longer updating it, and, at least in my machine, it's not working anymore. 1
The plug-in author's suggestion would be to use a more modern text editor (like Visual Studio Code) and use one of the extensions. (Live Preview)
I know programs such as Webstorm JetBrains 6.0.1 can do this, you will have to download the chrome extension also. If not, then you can always use Codeacademy.com as an alternative and type code into there editor. It still works. :/
Just came across this post.
Years ago had been interested in Notepad++ but found it too limited as wanted it to be more of a wysiwyg type interface and not just text. Plus, would be awesome to be able to have sortable tables inside notes. The closest I've found to do these things are PIM tools such as OneNote or EssentialPIM.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
Imagine a web-designer built several mock-up html pages. Now it is time to start development according to these mock-ups.
First of all I would like to know that all mock-ups are there, i.e. every link has corresponded mock-up page. I can't just click hyperlinks, because they are empty ('#' url).
And secondly, I would like to have kind of map, where developer can look at and figure out transitions from the page and hence fill it with appropriate urls.
Does any body know any tools that can help to make such documents which reflect my needs stated above?
Thanks in advance
MS Visio for Windows or OmniGraffle for OSX can help you build a scenario project where you can design an interactive diagram where each box represents a page. When you click a box it shows the page mockup associated with this box. You can also draw lines between each box that represents links to other pages from this page.
balsamiq a flex app
Axure windows desktop app
Expression blend 3 from Microsoft has Sketchflow.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
Before I upgraded to Firefox 3 I used to constantly use the View Source Chart Firefox Addon which shows the source HTML in a very organized, graphical form. Unfortunately, this addon is only for Firefox 2 and the beta version for Firefox 3 now costs $10 on the author's site.
Anyone know of a similar addon that works for Firefox 3?
(of course, I might indeed pay $10 for this, but first want to ask around if there isn't anything better and free, as the version for Firefox 2 had its limitations and I don't really want to pay $10 for something in beta that I can't test out before paying for it.)
Is Firebug not sufficient?
You can try to use Nightly Tester Tools It overrides addons compatibility check. Using this tool I managed to bring all of my fav extensions from FF2 to FF3
View formatted source is kinda similar. It uses tree controls rather than pretty colour blocks, though.
Try Chris Pederick's Web Developer Toolbar.
You could always try Firefug. It sounds like it does a similar thing, plus more :)
i had the same problem...
you can use the free version (2.5.0503)...it's compatible with firefox3 and it's work.
on the web site it's write that it's not with full functionality but i don't know whitch functionality there aren't.