I'm modifying CSS using Firebug and FireDiff. I've had a couple of 'accidents' where I have 'saved a snapshot' but in fact just saved a diff (one or two changes), uploaded it to my web server and overwrote the full CSS file with a snippet. Fortunately I have been making periodic backups.
Question: how do I ensure that I save the whole file - either using Firebug itself or FireDiff?
Firebug
With Firebug itself you can save the CSS following these steps:
After you've made your changes switch to the CSS panel
Select the modified CSS file from the CSS Location Menu
Press Ctrl+A to select the whole CSS and copy it via Ctrl+C or by right-clicking on the selection and choosing Copy from the context menu
Paste the CSS into the text editor of your choice and save it
FireDiff
With FireDiff the steps are a bit different:
After you've made your changes switch to the Changes panel
Within the change log right-click on the CSS change you've made to the file you want to save and choose Save Snapshot from the context menu
Enter a file name into the save dialog and save the it
Notes:
FireDiff requires another extension called Fireformat to save snapshots.
As the word 'snapshot' indicates FireDiff saves the file including all changes up to the one you've chosen. If you want to save the current state of a file, you need to choose the last change to that file.
For both methods you need to take care in which file the CSS was saved. In case of inline CSS, i.e. CSS included in the HTML output via the <style> tag you need to save the CSS back to the HTML output.
Other extensions
Besides doing this in Firebug or using FireDiff there are Firebug extensions, which claim to allow you to upload your changes directly to your server via FTP. These extensions are cssUpdater and FireFile. Though they seem to not be maintained anymore and may not work with current versions of Firebug.
Related
I'm working on a complicated site that has a lot of css files and js files that load on every page. I'm working on a single css using Chrome's developer tools. Once the css is mostly correct in developer tools, (Element tab, Styles side bar), the css is copied to a local css file and then uploaded to the web server. Since only a single css file has been modified it would be faster to reload a single css file instead of hard refreshing and reloading the entire site including images, js, and css, etc.
The site has an option to minify the css file and combine it with the other css files, creating one single very large css file. That option is turned off while in development mode. Adding a version number to the css file name isn't the trick I'm looking for.
Is it possible in Chrome Developer tools to click on a source file and refresh only that file?
This is a bit of a hack, but I think it'll work for your scenario.
When I initially load an example page, you can see three CSS requests:
I want to refresh the devsite-googler-buttons.css file, so I find it in my DOM Tree:
(Command+F on Mac or Control+F on Windows / Linux opens up that search panel at the bottom of the Elements panel... makes it easier to find stuff in a big DOM)
Right-click, select Edit as HTML, and then append a random query string to the end of the link:
And in the Network panel, you can see that the file was re-downloaded:
See also: Konrad's answer provides some handy code for automating this via a Snippet.
It might be handy, in your situation, to automate it a bit:
function reloadCSS() {
const links = document.getElementsByTagName('link');
Array.from(links)
.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
.forEach(link => {
const url = new URL(link.href, location.href);
url.searchParams.set('forceReload', Date.now());
link.href = url.href;
});
}
reloadCSS();
What this function does is it forces all CSS files to be reloaded by appending current time to their URLs.
You can modify it to target a specific file. You can run it from console, via DevTools 'snippets' functionality or make it into an extension.
If you don't mind refreshing the page, but don't want to re-download all resources, try the following.
Open the css file in a new tab. (You can right click css files from the Chrome developer tools and choose "open in new tab");
Hard-refresh this tab (ctrl/cmd + f5);
Soft-refresh the page (f5 or ctrl/cms + r).
According to me only Live editing is the only possible way what you are looking for I suppose. There is no way to refresh a single css file.
I have just started exploring the possibility of saving changes made to a page and it's styling in Chrome Dev Tools on the fly.
I've followed this short video tutorial on mapping the project files on disk to the Dev Tools via the Sources tab. Everything works fine until around the 5:17 point where he selects an element in the Elements tab and makes several CSS style changes which automatically persist to the file on disk.
This doesn't work for me. The changes won't save to the file and when I refresh the page reverts to the original styles. I have checked to see if there is an asterisk beside the corresponding CSS file in the Sources panel, to denote changes have been made, but there is nothing there.
I have also tried the solution posted in this SO question but I don't see the link to the stylesheet after editing the style in the Elements tab that will redirect back to the file in the Sources tab allowing the changes to be saved.
Can anyone tell me what I am missing? Thanks!
You need to make sure you map your Workspace to a Network Resource to persist changes automatically. I have produced the steps below to get this working correctly.
Select the folder in Sources and click 'Add Folder to Workspace'
If you open up our stylesheet in Sources and go to the Elements panel to make changes, upon coming back you will see a separate instance of the stylesheet opened with pending changes. The reason is that Chrome doesn't know how to map the URL to the file on your system yet.
Select 'Map to Network Resource...'. You will notice that 'top' disappears.
Make a change in the Elements panel now. When you go back to the Sources panel, the changes will automatically be shown without requiring any explicit save.
You can see exactly what was done by going to the Workspaces section of the DevTools settings panel. We've added a local Workspace, and then mapping the URL, which in my case is on my computer and accessed with the file:// protocol, to the relative path on the system.
The requirement is sent a Word document from browser, and automatically open it on MS Word so that then can view and edit the Word document.
The only solution I can found require the end user to click a dialogue Window in order to open a Word document in Office when the document is download from browser.
Is this the only way, that the user has to click a dialogue Window before Office can open the downloaded Word document?
It kinds of make sense for security reason to not let browser automatically execute an local application (Word.exe) on the local machine, but I still want to confirm that.
If the answer is yes, then I would like to know how to do that?
Edit: I just found out that you have to use inline instead of Attachement, otherwise it will always ask for the option event the browsers are setup properly.
Response.AddHeader("Content-Disposition", "inline;filename=clientquotes.docx");
After made that change, browser will auto open the Word document without asking for action.
If I understand correctly, you want to change the behaviour of your browser to automatically open downloaded files. As far I'm aware its pretty painless process when it comes to Firefox and Google Chrome, however on IE it's not as simple.
Firefox
Changing download actions
This will not affect media embedded in a web page - only links to the files themselves.
Click the menu button Menu and choose Options
Select the Applications panel.
The Applications panel will display. Select the type of file for which you want to change the default action.
The Action column will give you a drop-down menu, with options on action to take, whenever you click that type of file.
Alwaysask: will prompt you to select what action you want Firefox to take when you click on that type of file. This can be useful if Firefox is automatically saving a file type or is always opening it with a certain program and you want to be asked what to do.
Save File: will always save the file to your computer using the Downloads window, whenever you click that type of file.
Open the file with an application or plugin of your choosing.
Click Ok to close the options window after making changes
Adding download actions
On the web, find a link to a file matching the type you want to add.
Click on the file link to download it.
Select how you want Firefox to handle the file:
Open with: Saves the file to a temporary folder and opens it in the default application for that file type. To select an application, click Browse....
Do not choose Firefox to always open a certain file type, as doing so can cause
a problem where Firefox repeatedly opens empty tabs or windows after you click on a link.
Save file: Saves the file to the download folder (specified in the Firefox General panel).
In the Opening file window, check mark Do this automatically for files like this from now on.
Click Ok.
Is Do this automatically for files like this from now on disabled?
This can happen if the website's server incorrectly specifies the
Internet Media type of the file. It also can happen if the server assigns
"Content-Disposition: attachment" to the file.
Reference
Google Chrome
If you want certain types of file always to open after they've finished downloading, click the arrow next to the file button in the downloads bar and select Always open files of this type.
Reference
IE
From what I can gather for IE you will have to change the registry keys. You can refer to this link for further information.
I hope this answers your question.
How do I display all changes which I made using Chrome Developer tools?
Example:
open a website.
open Chrome Developer Tool.
change style attribute of a tag.
add new style to some css file.
change a JavaScript function.
How to see those changes? Something like:
page.html:56 Change style attribute of foo to bar.
page.css:21 Lines added: 21,22,23,24.
page.js:12 Line modified.
As of Chrome 65 there is a changes tab!!
Yes really, it is amazing :)
Open Dev Tools > Ctrl+Shift+P > Show Changes
https://developers.google.com/web/updates/2018/01/devtools#changes
So, local modifications work for any changes to the files that you make, but they don't help you if you add inline styles or change your DOM in any way.
I like to use a method where I capture the DOM before and after my changes.
copy(document.getElementsByTagName('html')[0].outerHTML)
That places the current state of the DOM into the copy buffer.
Paste this in the left hand column of a diff tool like vimdiff, http://www.mergely.com/ or Meld.
Then I finish my modifications and run the copy command again. I paste that into the right hand column of the diff tool, then I can see my changes.
Full article here: https://medium.com/#theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a
You may want to try the Local Modifications feature:
The DevTools also maintains a revision history of all changes made to
local files. If you've edited a script or stylesheet and saved changes
using the Tools, you can right-click on a filename in Sources (or
within the source area) and select "Local modifications" to view this
history.
Local modifications panel will appear displaying:
A diff of the changes
The time the change was made at
The domain under which a file was changed
I have seem a lot of videos in which developers are changing CSS on the fly in chrome. I tried the same thing but chrome did not allow me to change the code. I can't write on the style sheet.
Is there any specific setting to do this? Kindly help.
EDIT: To edit the CSS, I right click on an element, select inspect element. It will open the console. I select the id of the element and go to style.css in Resources and try to change the CSS. It does not allow me to write there.
You are doing it wrong... the resources panel is not there for live edit, if you want to change the css associated with an HTML element, right click on that element and then in the right panel you will see the css styles associated with the selected element. You can edit that rules and you will see the changes in real time.
Maybe you can check some videos to learn some basics about the Chrome Developer Tools, and after that if you want to learn more, you can check this question:
Chrome Developer Tools: Best resource for learning advanced features?
Here is a great tool for Google Chrome called Stylebot.
In this you can change the style sheet and save your own styles to any website for your own custom website theme!
Here is the link for Stylebot
Check it out and to put the icing on the cake, it's free!
This should not be used to work on your own website projects since the CSS file saves local on your browser!
In Chrome, clicking on something like "all.css:1" in the Styles pane of the Elements tab of DevTools takes one to the Sources tab of DevTools. If you're looking at code on remote server, the CSS rules in this source view are not live-editable (unlike the live-editing Style Editor tab of Firefox*) unless you're:
viewing the "inspector-stylesheet" -- a temporary stylesheet containing new style rules you created with the "+" button in the Styles pane of the Elements tab. Clicking on a new rule's "inpector-stylesheet:1" link will take you to the editable source of the temporary rules you've created.
viewing a persistent local workspace. Setting this up takes a few extra steps, described here: "Set Up Persistence with DevTools Workspaces" .
Basically, you make a local folder on your machine where you can save local copies that you direct Chrome to use in in lieu of the version on the internet. See the instructions at that link. Note that, as it says there, "If you are mapping files from a remote server instead of a local server, when you refresh the page, Chrome reloads the page from the remote server. Your changes still persist to disk and are reapplied if you continue editing in Workspaces." (So just type a space character into the source local CSS file to see your alterations applied again, if you've refreshed or navigated to a different page that uses the same stylesheet.)
* In Firefox, if you right-click on an element on a remote webpage, select Inspect Element, then in the Rules pane of the Inspector tab, click on a link on the right like "all.css:1", you are taken to a "Style Editor" tab where you can immediately live-edit, in contrast to Chrome's requirement of making you map to a local file. This may cause some people some confusion, if they expect the same behavior from Chrome's DevTools.
Another Chrome extension that is similar to Stylebot is Code Cola. It has an inspector that allows selecting elements, and a visual editor which does not require typing the CSS by hand. To see the generated CSS code click the curly brackets icon in the toolbar.