Is there an editor similar to firebug in functionality that lets you edit the CSS directly from the browser and shows you the changes live, but also has the ability to save changes to the server through FTP or some other connection?
I've never used it myself, but you could try the free trial of Skybound Stylizer.
Here's a quote:
Online CSS Editing
Open any site, make
changes, then save back to the server
via FTP, SFTP, or a network share, or
others.
..
Stylizer's real-time CSS development
extends to 9 different integrated web
browsers. On Windows, Google Chrome,
Internet Explorer 6, 7 & 8, and
Firefox 2.0, 3.0, 3.5, 3.6 are
supported. On Mac, Safari is
supported.
..
The Stylizer workflow couldn't be
easier. Just open up the URL or the
HTML page you want to edit, the style
sheets are automatically extracted
from the page, and you're ready to
start making changes.
FireFile is what you are looking for.
the web developer toolbar for firefox allows you to do that -> https://addons.mozilla.org/en-US/firefox/addon/web-developer/
well.. it allows you to save the css but I'm not sure if it's through ftp. but you can use that in combination with expandrive
http://cssUpdater.com is what you really are looking for :)
Edit in FireBug, hit the "Sync now" button and reload your page.
Related
I created a new VS 2013 project and viewed the default.aspx page with the Firefox browser. When I check the net calls it has made, I see it making constant calls to:
http://localhost:50682/6a663a78019845d5ade4a328cad09cc2/arterySignalR/poll?transport=longPolling&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAAOBmDwPWa2ky2MAZXFHBMVAAAAAACAAAAAAAQZgAAAAEAACAAAADSADQXBVKiKczflJ0OzUjOLduFTJE4zd%2FLHWGpDfXnuAAAAAAOgAAAAAIAACAAAACyEX81VwilygfphPoEKCYQ6ZwrkzExoKfZzEMkqBKqqzAAAADG%2BDJbrEFOfsNm9OKhqacnGseQvrwy5kmyZnI5YJiZbjYFgzMELXHfwA7Sxjj4osJAAAAAvQvoG4N0nn8eB9FRaJaZyqaUDF%2F9ypvGN%2B%2BVefnx8U1Fq6P9HXO9vEC%2BfA2s8R4jik58rD4IcFMjM4P8l5kv6g%3D%3D&messageId=d-F1180A0E-W%2C0%7Cl%2C4%7Cm%2C0&requestUrl=http%3A%2F%2Flocalhost%3A50656%2Fdefaulttest&browserName=Firefox&tid=4&_=1384207744328
Why is it doing that?
How do I stop those calls?
I see an infinite number of calls made to the above URL every 6 seconds.
Please help me understand this and fix this.
This is working as intended. Artery aka BrowserLink is a real-time connection from Visual Studio to all browsers running your code. It essentially allows Visual Studio to interact with every browser.
For instance if you have IE, Opera, Chrome and Firefox all running your code and you're trying to ensure cross browser correctness; instead of going to each browser and hitting f5 to refresh you can just click the browser link refresh button which will auto-refresh all of the pages for you.
Not everyone wants or needs to have this functionality so if you do want to disable it, as Gustavo Armenta said you can disable it by following the steps here: How can I disable __vwd/js/artery in VS.NET 2013?
I would recommend you to read this post first Browser Link feature in Visual Studio Preview 2013 to understand about this new feature that comes in with VS 2013.
And then to disable this, simply uncheck the "Enable browser link" option.
You can hide the polling requests from the Chrome developer tools Network tab so that the requests you are actually interested in become visible. You can hide the polling requests by adding a negative filter:
On the Network tab, click the filter button to open the filter options
Enter "-poll" without the quotes to hide the polling requests.
Example:
Had issues with that on site running with KnockoutJS framework. Pages were freezing for 10 seconds until "BrowserLink" external scripts were loading (using Chrome browser).
Issue solved by disabling "Browser link" feature in VS 2013
Steps How to disable "Browser link" (thanks to Gustavo Armenta for leaving comment with link in question)
I've created a website using ASP.NET (C#) Framework 4.0
When running on my local IIS (in debug/release - before and after deployed) - the website is displayed correctly - as intended (checked on Internet Explorer 9, 10, Chrome and FireFox)
After I've deployed the website to my server (Windows Server 2008 DataCenter - Amazon hosting) - and only in IE 10 - the website is NOT displayed correctly - spacing is sometimes wrong, background colors sometimes disappeared, links not working properly, padding/margin is missing in some of the places and more... - it seems like the styles/CSS are partial... On other browsers (Chrome/FireFox/IE9) - it is displayed correctly (as intended)
I've tried to add the compatibility meta tags to IE=9 - didn't work (by the way, in IE10 - if I open the F12 tool - and change the Browser Mode to IE9 - it works!, but if I just change the Document Mode - it doesn't seem to help)
Why is Internet Explorer 10 evil??? Has anyone encountered this issue? any suggestions?
Thanks a lot! :)
As you write you are using F12 tools. My experience is that with Developer Tools running IE10 often does not apply all CSS rules (especially in at the end of external files). Refreshing the page or closing F12 tools usualy solves the problem. Also if you know which style is not applied it helps to disable and enable it again.
i have passe through a similar situation and some things just don't stay they way i want in every browser, so perhaps the better way out is to create CSS hacks tos specific spacing or styling issues you may have encoutered.
http://www.impressivewebs.com/ie10-css-hacks/
After a lot of searching and frustration, I've found the solution to my problem (here: http://www.nuget.org/packages/App_BrowsersUpdate)
Apparently the website should be updated to allow IE10 compatibility...
In your solution - install the ASP.NET Browser Capabilities Update using the following command in the "Package Manager Console" (can be started from "Tools"->"Library Package Manager" in your VS):
Install-Package App_BrowsersUpdate
(this will add ".browser" files to your website and few lines in your "web.config" file)
Rebuild and re-deploy your website and that's it! now my deployed website looks as intended on IE10!
(I still don't understand why it worked correctly on my localhost and not on the web server but at least the problem is solved)
I need to change the color of some words in one category of the widget, I have seen the youtube video about Development Tools.
When I locate the part where I want to change, and I do the change in "Elements" (of Development tools) on the top right corner in the element.style {color:red;
}
but as following the video when I go to resources the changes I made is not there.
I can only edit in Elements, I cant save it
I can only save in Resources, I cant edit/add anything
can someone please help me how this dev tool suppose to work?
I can however edit/add AND save in the Sources, maybe I need to save the style sheet from Resources to Sources? is that what I am suppose to do?
As you said Chrome Dev Tools don't have the builtin function to save the code you edit, anyway there are a couple of Chrome extensions. The best in my opinion is Tincr.
You can find it here Tincr
Then you can also find a tutorial here: http://addyosmani.com/blog/lets-tincr-bi-directional-editing-and-saving-with-the-chrome-devtools/.
Basically you
install the extension,
then you select the application type between: Ruby on Rails, Chrome Extension, Atlassian Plugin and Configuration file,
then you can add the root directory of your project.
When you are done, if you edit something using Google Chrome Dev Tools, the changes will be saved automatically to the source files and there is also a live reload function, so you don't have to press the refresh button or F5 to reload the page after changes.
You cannot edit files on the server through the developer tools and changes will not stay after a refresh.
An updated answer as of March 2013, you can now save changes (JS and CSS, not DOM) from within Dev Tools.
http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/
I'm getting a weird issue involving IIS and IE, and I'll try to describe it clearly.
I have a regular html-css-js/jquery website that I've developed locally. Now that it's ready, I'm trying to deploy it on a server.
Once it's hosted on the server, I see two problems in IE only:
The rendering is slightly different: there's a few pixels of additional white space all around my website (so the contents is actually more 'compressed' than when viewed locally).
Some JS issues: I'm using the Impromptu jQuery popup plug-in, and the callback I specify in its 'loaded' event pre-populates its forms fields. In FF it works, but in IE the fields don't get populated until I close the popup and open it again. This worked locally on all browsers.
As weird as it sounds, the text in my jQuery popup dialog does not seem to have the 'ClearType' technology applied. The text is like '1 pixel thin' and not anti-aliased like everywhere else.
I have uploaded my website to another server and it runs perfectly fine. The issue is that I need to put it on the first server and I don't know what's wrong. Both servers are on Win 2k3 with IIS 6, .NET 3.5.
Any pointers as to what is going wrong? Thanks a lot.
Make sure that the "security zone" in the Internet Explorer status bar is the same when viewing the site between the 2 servers.
Use the IE developer toolbar to debug your css. Could also be a caching issue if it looks like an older version.
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535
Are there any freeware plugins that would help me view the HTML Source generated by ASP.NET?
Microsoft's Fiddler2 for IE
Or Firebug for FireFox
With these you see the real source generated by ASP.NET, not the mangled source as shown in a browsers 'view source' menu option
The Internet Explorer Developer Toolbar has many features. The Web Developer add-on for Firefox looks slick. Here is a walk through of using another add-on for FireFox.
If what your looking for is just to view the source, all browsers I am familiar with have that feature built in. Internet Explorer
You can use Internet Explorer's View Source button, under the 'Edit menu. Firefox has something similar under the View menu.
Edit: If you're looking for the source code for the application, you won't be able to see that no matter what you do. The server sends the client only what it wants the client to see. For ASP.NET, this means you'll see ASP.NET generated control IDs and the like. If you want to do this on your own without a web browser, try Wget.
You shouldn't have to look when that function is already built in to just about every single web browser out there. View Source is a standard feature.
Installing the Web Developer extension for Firefox will let you view 'generated' source (i.e. it includes changes made to the html by client side javascript etc..). Otherwise the standard 'view source' option available in any browser should suffice.