What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.
Related
I want to be able to save the selections I made on a page. If there's an app or extension that can easily do that, please let me know!
I clicked "Inspect Code" to open Chrome DevTools and tried copying all the code under "Elements" and pasting it in another browser. The page is incomplete, however. No graphics, no data, etc. What else do I need to copy and paste over?
I'm on a site/platform that I can only access with an internal login. Once I am there, I am able to make selections from dropdown menus.
Every time I have to pull a certain report, I have to select over 200 institutions from a dropdown menu. The next time I go to the site, I want to be able to see those institutions ticked off already.
Thank you.
Another way to get all of the code from a website is to do Ctrl + u, which brings you to the website's source code. You could use this to copy the code, but you would have to make seperate files and copy the code in them for scripts and links.
You can use wget (and a cookies.txt file with your logged-in cookie) to get the page, it's resources, and convert the links to load from your local copies:
wget --mirror --convert-links --adjust-extension --page-requisites --no-parent --load-cookies=cookies.txt http://example.org
Though I am very curious why you would need to do this...
You could create your own browser extension that checks the boxes for you when the page loads, or you can try to see if this browser extension succesfully captures the part of the page you need.
You could try using your browser's developer tools by right clicking some of the data and selecting "Inspect" or "Inspect element". This will most likely take you to a current snapshot of the HTML page you have open. This you should be able to copy paste to a more persistent format.
I like how when I use F12 on chrome I can edit a page live and check the source files and all that, but I would like to be able to use this on my own website so that every edit I make using F12 is instantly saved to the local html/css file. I like the live output is what I mean. Are there any programs like this? I've tried extensions as well but they all seem to be standalone nothing to do with the website I am browsing through. Is there any way to run F12 as the owner of the website?
No its NOT possible.
However, you can use a scrapping software like Httrack and copy the entire remote website's CSS, JS and HTML files on your local system and then you can edit files manually using any text editor or IDE of your choice.
so, i've ben hunting for the answer, and seems like i can't get this to work, i wanted to make so that, i have a browser page already made in html, and when i click a link in there, it opens a chosen folder on the computer, but i don't want it to open on just this computer's path, I wanted to open a folder that is inside the main folder, so that anyone that has the same files as I do, can open it, i tried < a href="File_path">, tried putting < a href="file:///(file path)">, tried like i have in excel ../../'file path', and can't see where is the problem, anyone can help?
Here you need to use a "file" protocol to link a file in the HTML like,
Link
The browser may or may not open the file due to the security setting. You can click the right button and choose "copy link address" and then paste it into the browser.
There are security implications of showing a local file/folder from an website. It may work when the page is held locally but when on a server it will be failing. However definitely not any chosen folder anywhere in your PC.
If you require to achieve such you need custom implementation using a programming language like ASP .NET like shown in this example.
https://stackoverflow.com/a/6047826/684030
You haven't mention much details on what web server you are using. But if it's IIS (Windows) you may consider allowing directory browsing which may allow to show a sub directory under your website.
The Chrome "Inspect element" HTML editor is very easy to use with lots of cool features, I love the collapsible elements, highlighting, and live updates so I can see exactly what's happening. Usually when I'm writing I'll create an empty file and open it in Chrome so I can start there. Unfortunately I have to copy everything to the document whenever I want to save and if I accidentally click on a link I lose everything. Is there an extension or something I can use to save the file (Maybe even to google drive?) I've recently accidentally lost a bunch of work a couple times in a row so I need to change something. I've tried brackets, atom.io, shiftedit, and codepen but none of them have the convenience and features of Chrome's console.
Thanks
You can use the Workspaces feature to work with files from DevTools so changes will persist to your computer automatically. Works with all source file types.
Check out Snippets in Chrome DevTools. The code snippets are stored in the browser, and you can run them on any page/site. I find them very useful myself.
You see the DOM in the "Elements" panel. The page may have JS that changes the DOM Tree.
So what you see in the Elements panel is not the source HTML. Therefore you can't just change things in the elements panel and save the changes to your HTML file.
A lot of tutorials which can be downloaded have the file type of .chm, .pdf, .html, etc. I downloaded a Java SE tutorial of Java SE in HTML format. When I use chrome to view it and everything is good. But I just wonder how could I just directly highlight some useful information (e.g. text) when I use chrome to view it? The html files are local, I know that I could use some software to edit it, like using HTML tag <font color:> etc.
But I just want to highlight it directly in the browser like editing it in word. Is there any suggestion? Dose chrome support such kind of plugin? If you still don't understand what i mean, please refer to "clip to evernote", which is a plugin of chrome and can cut the pages and upload them to the evernote server. when I use evernote client to read them, I can directly highlight some words which is useful to me.
It's much more a SuperUser question, but ... There is a lot of plugins for highlighting web pages out there. You could try Yawas or Simple Highlighter
edit: ok, I think I understood better your problem ... Yawas, Simple Highlighter, as well as most other highlighters, don't hightlight on local pages.
I'm not sure there is such an highlighter available for Chrome, then. What I would suggest is to try opening you documentations with Amaya instead of Chrome. It's both the Browser and the Editor from the W3C; and since it has both functionalities, you probably will be able to do what you want on your local pages.
You can save it to your computer by clicking "Open a new tab containing a list of highlights and notes on just this page". Then you can save only the html contents to your computer with the name as you like. Don't try to use ALT to save the list of note because you will never see the contents what you want to save.