I just saw jsFiddle today and am wondering that is there a FireFox addon that provides jsFiddle like features. Especially when you enter the html and css, jsFiddle shows you a layout of the page. Is there any addon that shows such layout for "offline viewing"? I use Firebug but there isn't such layout. Does somebody know about it?
Not a firefox add-on, only in the interest of self-promotion:
I have created a Vim script with similar (but at the moment very limited) functionality: vimfiddler. Vim integrates with selenium to drive a browser. Provides a jsfiddlerish experience running locally on your own computer.
In Google Chrome you can edit every element of the page. Just open a new tab, hit F-12 and edit to your heart's desire. Add some css or javascript to the head tags, put whatever HTML you want in the body, and you're good to go.
This add-on sounds like what you need : https://addons.mozilla.org/en-us/firefox/addon/devtools-prototyper/?src=ss
Just install it, open the devtools, then switch to the "Prototyper" tab.
Related
I'm making a Chrome Extension which changes the layout of a website. When my extension is activated and the website loads, you can briefly see the real website then it switches to my modified version loading in all the CSS and JS from the Chrome Extension. Though I've used other extensions that do something similar but have it displayed before anything actually shows the real website. One example is Shine for Reddit. When Reddit shows, it shows the extensions version of the website right at the start. How can I do this?
I'm looking for the chrome extension that allows you to edit html source and instantly view the result. See the screenshot for mac, perhaps there is no such software available for windows version of chrome, but I would appreciate the mac version reference too.
There is already this kind of tool built in to Chrome. If you right click on HTML page and select "Inspect Element" you can make your changes and Chrome will update itself automaticly.
If you don't like this feature however and want one that looks beter, check out this link. I'm almost certain there will be some results that you like.
https://chrome.google.com/webstore/search-apps/Editor
I'm terribly sorry, this is NOT a chrome plugin, but node.js application https://github.com/phuu and this is really good one see the screen
Can anyone suggest a browser plugin that will let me override a website whenever I am loading a particular website.
Example Scenario:
Whenever I load yahoo.com I want to change on how it renders the html and behave.
It needs to be able to manipulate the DOM. example, it can change the attribute of an <img height="" width="" />, example the width and height of the image.
Aside from changing attributes it also need to be able to inject new elements. example i can insert new <divs> or <p>.
I also need to be able to manipulate the head tag as I like to insert external CSS and JS for the overrides.
I primarily use Google Chrome and Mozilla Firefox.
Thank You.
Chrome has native support and Firefox via a plugin for user scripts (also called greasemonkey scripts). They are essentially javascript files that are installed like an extension. At the top you define the domains for your script to run on and you have access to modify the DOM. There are lots of examples at http://userscripts.org/ . Load a few in chrome and then take a look at the user.js file source to see how they work.
You could also do it via a Bookmarklet, however they are more of a hack compared to Greasemonkey scripts
It's called the content scripts in Chrome extension.
I'm new to Dreamweaver CS4 and making my first website. I've watched a lot of tutorials and they all just click the Preview in Browser button and they can see what their page looks like in Firefox/IE/etc.
But when I click Preview in Browser a new Firefox window opens up and it goes to my homepage and that's it.
What do I need to setup in order be able to preview in firefox?
THANKS!
I don't use Dreamweaver, although I have it as part of CS4. But I just now opened up the app, created a test HTML page, saved it, and hit F12 (Preview in Browser). And there was my test page. I honestly don't know what you could be doing wrong. I thought it might be that you didn't save your file, but you get a warning dialog if you try to preview without doing that.
After some playing around I fixed the problem myself.
First I had to go to manage site and edit the basic preferences on my website.
I had to make sure the 'URL to browse to the root of your site" is valid.
In my case it I had to add:
file:///C:/Documents%20and%20Settings/Linda/My%20Documents/website1/
I want to be able to open my website and use some kind of firefox plugin to re-arrange some Html on the site by drag-and-drop and be able to use that modified source. I used to use a css plug-in but do not remember it anymore. Are there any cool tools or plugins avaiable?
It's not drag-and-drop, but Firebug will let you modify any web page in Firefox. You'll have to edit the HTML/CSS source directly, though; once you're done, you should be able to copy and paste into a text editor.