Not a good way to start, but pardon me if this if off-topic, it seems like a programming question though...
From an ASP.NET website I want to open a page in a new browser that has a toolbar at top and an iframe-like window at the bottom. The frame-like window will support tabbed browsing and load a third party website. The toolbar will have buttons that allow the user to manipulate the HTML (form-fill and web-scrape). For example, toolbar buttons may be "Extract Webpage Data" or "Fill Form".
Ideally it would work with IE, Edge, Chrome and Safari, but an absolute minimum requirement is IE, a more preferable minimum requirement is Chrome and Edge.
I have seen this done, well, by other proprietary software. I do not know if they require a specific browser (like IE where they can install a plugin) or how they do it, that is my question.
So I have narrowed this problem down to three possibilities:
Use pure HTML, Javascript, et al. - Using an iFrame almost works perfectly but the content will not be in the same domain so I cannot access the iFrame's HTML.
Use (or write) a proprietary browser - I do not think you can (or want) to launch an EXE from a web page, plus this seems rather complex in itself.
Use (or write) a plug-in - Probably limits use to IE. I think an IE plugin could do what I want based on other plugins I've seen.
I have past desktop programming experience with a web automation and scripting product, while promising, I don't think they offer what I need:
They have an ASP.NET COM component that runs server side so it does not display an interface to the user but can be used to silently fill and scrape a website based on scripts.
They also have a proprietary browser that shows a user interface and runs scripts to fill and scrape. But this is an EXE, so cannot be launched from a web site.
They have an IE Plugin, that adds a companion popup window that attaches itself to IE. Similar to their browser and runs scripts.
Question - This can be done, I've seen it, but what is the mechanism? I'm leaning to an IE plugin.
If plugins are the answer, chrome has extensions, is that a possibility?
I hate Firefox, I really do, but as a web developer I'm chained to it b/c of the robust set of tools that Firebug offers. Recently Chrome and Safari's inspection tools allowed users to edit full chunks structural code (in a very buggy manner), but you still can't edit full stylesheets. Usually when someone brings this up, Chrome and Safari developers say "BUT YOU CAN EDIT CSS," and that's true, to an extent. You can edit CSS property-by-property (which takes forever if you have a lot of changes) in both browsers, but there is no way to see the full computed stylesheet, make edits within it, and immediately see the results. To date, only a full install of Firebug on Firefox allows you to do this.
Has there been any momentum in either of the Chrome or Safari camps to build a plugin to match this unparalleled function? Cheap plugins that allow you to insert CSS into the page are not the answer. It's really simple:
Have a list with the current stylesheets that are being referenced
Choose the one you want to edit, and click an edit button
See all the code in the stylesheet
Make changes and see them reflected on the page immediately
Is it really that hard to build something that does this? I think it must be, b/c why else would the developer communities of two browsers completely ignore it? If there's something out there that now offers this capability, I'd love to hear it; otherwise, maybe someone will step up to the plate and develop it for either Chrome or Safari. It seems like the guys who developed the CSS Edit app would be all over this.
Thanks to you I found it!
The Live Stylesheets extension for Chrome is what you are looking for. Be sure to restart Chrome after installation to use it.
You can edit external stylesheets in Chrome DevTools, too (since Chrome 15 or so). Just double-click the stylesheet contents in the Resources panel (or click the "Edit" button below), edit, Ctrl-S to commit a new revision, Esc to cancel editing. And it updates your page as you type!
You can edit your CSS files directly on Chrome without relying on any extension.
Here is how: Edit CSS files on the fly using Chrome DevTools
A different way to access it:
right click the page, select inspect
on the DevTools, click on "Sources"
locate the css on the "Network" pane and click it
change the css and save it ( by pressing ctrl+s )
I am trying to debug a large and complex webapp that makes heavy use of DIVs, AJAX, dynamic HTML and server-side code to do its job.
Under normal operation we do not have problems. However, when we put the webapp into an IFRAME, certain functions trigger a crash in IE7 that renders the browser inoperable (all CPU used).
What tools exist to help track down what could be happening? Loading the IE process into the debugger gives me all sorts of fascinating info about the registers, but I think the issue is in javascript.
We have tracked down one problem with the app already that involved incorrect reparenting of an element (something attached itself to window. instead of document.)
I wrote a test IFRAME page that dumps the innerHTML of the iframe into a textarea, so it can be compared during various states, but that only shows me static attributes, I can't tell what sort of javascript events are associated with elements or determine if a handler is firing out of turn.
IE8, Firefox, Chrome etc do not have the same behaviour.
Ideally I'd like something that would let me snapshot the DOM (or the javascript VM?) during a known good state, then "just before it happens" so we can figure out what's added / removed / missing / different. What is out there?
Update: I'm now trying to use the IE Developer Toolbar to track it down.
Update 2: The IE7 crash occurs following this AJAX code:
function Sys$UI$Control$get_element() {
/// <value domElement="true" locid="P:J#Sys.UI.Control.element"></value>
if (arguments.length !== 0) throw Error.parameterCount();
return this._element;
}
The return this._element; line is the last thing that happens before I lose IE.
IE Developer's Toolbar. Download it here (IEDevToolBarSetup.msi).
For JavaScript debugging refer this blog.
Some guy made a bundle that's called Internet Explorer Collection. It includes some 6 different IE browsers ranging from IE6 to IE8 in different builds. All those include Firebug (really, it sort of works) and Internet Explorer Developer Toolbar.
It was really helpful for me to debug IE7 issues.
see this link.
By placing 'debugger' in the javascript files in places where you'd like to start debugging you can debug the javascript in visual studio as well complete with trace, call stacks, etcetera.
The IE developer toolbar definitely helps alot. Visual Studios's debugger is also very good if you can get a machine with VS and IE7 on it.
DynaTrace is a profiling tool for IE7. However, it provides a great deal of information (including JS stacks), so it can also be very helpful for debugging.
IE 7 and IE 8 has built in debugging tools. Press F12 and you are ready to debug. Also firebug-firefox and chrome's inspect element options are useful/
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Firebug is the most convenient tool I've found for editing CSS - so why isn't there a simple "save" option for CSS?
I am always finding myself making tweaks in Firebug, then going back to my original .css file and replicating the tweaks.
Has anyone come up with a better solution?
EDIT: I'm aware the code is stored on a server (in most cases not my own), but I use it when building my own websites.
Firebug's just using the .css file Firefox downloaded from the server, it knows precisely what lines in which files it's editing. I can't see why there's not an "export" or "save" option, which allows you to store the new .css file. (Which I could then replace the remote one with).
I have tried looking in temporary locations, and choosing File > Save... and experimenting with the output options on Firefox, but I still haven't found a way.
EDIT 2:
The official discussion group has a lot of questions, but no answers.
Been wondering the same for quite some time now,
just gut-wrenching when your in-the-moment-freestyle-css'ing with firebug gets blown to bits by
an accidental reload or whatnot....
For my intents and purposes, I've finally found the tool.... : FireDiff.
It gives you a new tab, probably some weird David Bowie reference, called "changes";
which not only allows you to see/save what firebug, i. e. you, have been doing,
but also optionally track changes made by the page itself....if it and/or you are so inclined.
So thankful not having to re-type, or re-imagine and then re-re-type, every css rule I make...
Here is a link to the developer (don't be disparaged by first appearance, mayhap just as well head straight over to the Mozilla Add-On repository .
I got here looking exactly for this feature, that is, being able to save edited CSS properties back to the original file (on my local development machine). Unfortunately after searching a lot and not finding anything that suits my needs (OK, there's CSS Updater but you have to register and it's a paid extension...) I gave up on Firefox + Firebug and looked for something similar for Google Chrome. Guess what... I just found this great post that shows a nice way of getting this to work ( built into Chrome - there's no need for additional extensions ):
Change CSS and SAVE on local file system using Chrome Developer Tools
I tried it now and it works great highlighting the changed lines. Just click Save and you're done! :)
Here's a video explaining this and much more: Google I/O 2011: Chrome Dev Tools Reloaded
I hope it helps if it doesn't matter to you changing browser while editing your CSS files. I made the change already for now, but I would really love to have this functionality built into Firebug. :)
[Update 1]
Today I just saw this video: Firefox CSS live edit in Sublimetext (work in progress) Looks promising indeed.
[Update 2]
If you happen to be using Visual Studio 2013 with Web Essentials you'll be able to sync CSS automagically as shown in this video:
Web Essentials: Browser tools integration
The Web Developer add-on let's you save your edits. I'd like to combine the editing of Firebug with the Save feature of Web Developer.
(source: mozilla.org)
Use the "Save" button (click CSS menu -> Edit CSS) to save the modified CSS to disk.
Recomendation: Use the "Stick" button to prevent losing your changes when you change the tab for doing other browsing. If it is possible, use only one tab to do the edit and other firefox window the related searches, webmail, etc.
I just released a firebug addon at the mozilla addon sandbox which might quite do what you want:
https://addons.mozilla.org/en/firefox/addon/52365/
It actually saves the "touched" css files on demand to your web server (by communication with a one-file webservice php script).
Documentation can be found at my homepage or on the addon page
I would appreciate any testing, bug reports, comments, ratings, discussion on this, as it's still in early beta, but should already work fine.
CSS-X-Fire
I'm surprised that it still not listed to this question, but probably because is new and the author didn't have time to promote it yet.
It is called CSS-X-Fire and it is a plugin for JetBrains series of IDEs : IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine.
How it works:
You install one of these IDEs and configure the deployment (supports FTP and SCP). This will allow you to stay in sync with the server.
After this you install this plugin. When it starts it will ask tell you that he will install a plugin for Firefox, in order to do the integration between Firebug and the IDE. If it fails to install the plugin, just use the drag-n-drop technique to install it.
Once installed it will track all your changes from Firebug and you will be able to apply them with a simple click inside de IDE.
FireFile
FireFile is an alternative that requires you to add one small php file to the server side in order to be able to upload the modified css.
You could link firebug to eclipse with fireclipse and then save the file from eclipse
I think the closest you're going to get is by going into Edit mode in Firebug and copying and pasting the contents of the CSS file.
We just introduced Backfire, an open source javascript engine that allows you to save CSS changes made in Firebug and Webkit inspector to the server. The library includes an example C# implementation of how to save the incoming changes to your CSS.
Here's a blog post about how it works:
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
And here's the code hosted at Google Code:
http://code.google.com/p/backfire/
I know this doesn't answer your question, but surprisingly, Internet Explorer 8's Firebug clone "developer toolbar" (accessible via F12) offers the option to "save html". This function saves the current DOM to a local file, which means that if you edit the DOM somehow, e.g. by adding a style attribute somewhere, this will be saved too.
Not particularly useful if you're using Firebug to mess around with CSS like everyone does, but a step in the right direction.
I propose a solution that involves a combination of Firebug and FireFTP as well as code that directly accesses the local file system when running a website locally.
Here are the scenarios:
Working on a website that is hosted on a remote machine
In this case you would provide the FTP details and the location of the CSS/HTML/Javascript and Firebug would then update these files when you save your changes. It may even be able to locate the files itself and then prompt you to verify that it has the correct file. If file names are unique it shouldn't be a problem.
Working on a website running on your local machine
In this case you could provide Firebug with the local folder location of the website and the same behaviour would be used to match and verify the files. The access to the local file system could be performed through FireFTP if necessary.
Working on a website hosted remotely without FTP access
In this case something like the FireFile add-on would have to be implemented.
An additional feature would be the ability to save and open project files that store the mappings between the local files and the URLs they are associated with as well as saving the FTP details as FireFTP already does.
I am the author of CSS-X-Fire which Sorin Sbarnea also kindly posted about in this thread. Guess I'm a bit late ;)
CSS-X-Fire emits CSS property changes from Firebug to the IDE where the changes can be applied or discarded.
There are a couple of advantages with this solution over most of the other existing tools which only know know about the filenames and the content downloaded by the browser (see NickFitz comment in the original post).
Scenario 1: You have a website (project) which has a handful of themes from which the user can select from. Each theme has its own CSS file but only one is known to Firebug, the current one. CSS-X-Fire will detect all matching selectors in the project and let you decide which should be modified.
Scenario 2: The web project has stylesheets created compile-time or during deployment. They might be merged from several files and the file names may change. CSS-X-Fire doesn't care of the names of the files, it only deals with CSS selector names and their properties.
Above are examples of scenarios where CSS-X-Fire excels. Since it works with the source files, and knows about the language structure, it also helps to find duplicates not known to Firebug, jump-to-code, etcetera.
CSS-X-Fire is open source under the Apache 2 license.
Project home: http://code.google.com/p/css-x-fire/
FireFile
Firebug was created to detect a problem not to be a debugger. but you can save change if you add new tool that integrate firebug with save changes. it is FireFile, click here
http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html.
FireFile provide the desired functionality by adding a small PHP file to the server side.
Since Firebug is not working on your server but taking the CSS from the site and storing it locally and showing you the site with those local changes.
Use the CSS editor in the Firefox Web Developer toolbar:
http://chrispederick.com/work/web-developer/
It's got enough good stuff to use in conjunction with Firebug, and it lets you save your CSS out to a text file.
Use Backfire.
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
It's an open source solution that sends CSS changes back to the server and saves them.
Backfire uses a single javascript file, and the sourcecode package has a working .NET server implementation example that is easily portable to other platforms.
I had this problem forever as well, and finally decided that we shouldn't be editing things in the web inspector and built something for it (https://github.com/viatropos/design.io).
A better solution:
The browser automatically reflects CSS changes without reloading when you press save in your text editor.
The main reason we're editing css in the web inspector (I use webkit, but FireBug is along the same lines) is because we need to make small adjustments, and it takes too long to reload the page.
There are 2 main problems with this approach. First, you're allowed to edit an individual element that may not have an id selector. So even if you were able to copy/paste the generated CSS from the web inspector, it would have to generate an id to scope the css. Something like:
#element-127 {
background: red;
}
That would start making your css a mess.
You could get around that by only changing styles for an existing selector (the .space class selector in the webkit inspector image below).
Still though, the second problem. The interface to that thing is pretty rough, it's hard to make big changes - like if you want to try real quick copying this block of css to this place, or whatever.
I'd rather just stick to TextMate.
The ideal would be to just write the CSS in your text editor and have the browser reflect the changes without reloading the page. This way you'd be writing your final css as you're making the little changes.
The next level would be to write in a dynamic CSS language, like Stylus, Less, SCSS, etc, and have that update the browser with the generated CSS. This way you could start creating mixins like box-shadow(), that abstracted away the complexities, which the web inspector definitely couldn't do.
There's a few things out there that kind of do this, but nothing really streamlining it in my opinion.
LiveReload: pushes css to browser without refreshing when you press save, but it's a mac app, so it'd be difficult to customize.
CodeKit: also a mac app, but it refreshes the browser every time you save.
Not having the ability to easily customize the way these work is the main reason I didn't use them.
I put together https://github.com/viatropos/design.io specifically to solve this problem, and make it so:
The browser reflects the css/js/html/etc anytime you save, without reloading the page
It can handle any template/language/framework (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
It's written in JavaScript, and you can whip together extensions real quick in JavaScript.
This way, when you need to make those little changes to CSS, you can say, set background color, press save, see nope, not quite, adjust the hue by 10, save, nope, adjust by 5, save, looks good.
The way it works is by watching whenever you save a file (at the os level), processing the file (this is where the extensions work), and pushing the data to the browser through websockets, which are then handled (the client side of the extension).
Not to plug or anything, but I struggled with this issue for a long ass time.
Hope that helps.
Firebug works on the computed CSS (the one which you get by taking the CSS in the files and applying inheritance, etc. plus the changes made with JavaScript). This means that probably you couldn't use it directly to include in an HTML file, which is browser/version specific (unless you care only about Firefox). On the other hand, it keeps track of what is original and what is computed... I think it should not be very difficult to add some JS to Firebug to be able to export that CSS to a text file.
I was wondering why can't I bloody well select and copy the text in front of my eyes. Especially when others say you can just "select and copy". Turns out you can, you just have to start the drag outside of any text (i.e. in the gutter above or to the left of the text) as any mousedown -- whether it's a click or drag -- on any text immediately invokes the property editor. You can also click outside text to get a cursor (even if it's not always visible) which you can then move around with the arrow keys and select text that way.
The text copied to the clipboard is devoid of any indenting, unfortunately, but at least it saves you from manually transcribing the entire contents of the CSS file. Just have your diff programme ignore changes in whitespace when comparing against the original.
You could write your own server script file that takes a filename parameter and a content parameter.
The server script would find the requested file and replace its contents with the new one.
Writing the Javascript that taps into firebug's info and retrieves the useful data would be the tricky part.
I'd personally rather ask the dev team at firebug to supply a function, it shouldn't be too hard for them.
Finally, Ajax sends the filename/content pair to the php file you created.
Quoted from the Firebug FAQ:
Editing Pages
Can I save to the source the changes I made to the webpage I'm seeing?
Right now you can't. As John J. Barton wrote on the newsgroup:
Editing in Firebug is kinda like taking out the pickles from and adding mustard to a restaurant sandwich: you can enjoy the result, but the next customer at the restaurant will still get pickles and no mustard.
This is a long-requested functionality, so someday it'll be available directly from Firebug. Meanwhile, you can try Firediff, an extension for firebug by Kevin Decker.
How can I output all changes that have been made to a site's CSS within firebug?
That's a feature implemented in Kevin Decker's Firediff.
Here's a partial solution. After you make your changes, click on one of the links to the relevant file. This is the original file, so you'll have to refresh the file, which is under the options menu button in the upper right of the firebug pane. Now you have the modified css page, which you can copy & paste. Obviously, you'll have to do it for each css file.
Edit: looks like Mark Biek has a quicker version
A very easy way to "edit" your page is to go onto the site via your internet browser. Save the page as html only onto your desktop. Go to your desktop and right click on the new web page file and select open with, choose notepad and edit the page from there, if you know html it will be easy. After all your editing is done, save the file and reopen your webpage, the changes should be there if done correctly. You can then use your new edited page and export or copy it to your remote location
Actually Firebug is a debug and analyze-Tool: not an editor and obviously not considered to be one. The other reason was already mentioned: how to you want to change CSS, stored on a server when debugging a webpage?