There are many times when I make changes to the CSS (and maybe HTML) of different elements directly inside the developer tools. Refreshing the page will result in loss of all those changes and copying them one at a time to a text editor will take a lot of time.
I can directly get the HTML by doing Copy Outer HTML but how do I get all the updated CSS from the page?
I am using Firefox.
Thanks.
Related
So I've made some little modifications to a particular website (background color, fonts, etc...) and I want these changes to be permanently applied for the next visits.
The issue is when I refresh the website, it goes back to its initial form.
Wether it's for Google or Safari web browser, is there a way to accomplish such task?
The thing is that each time you enter a website your browser downloads the whole DOM code of this site. The changes you make with Chrome's or Safari's dev tools applies only for the already-downloaded DOM that is displayed on your browser, but next time you will enter the same website, a new DOM will be downloaded and displayed - without your changes.
So, actually, I'm sorry but what you want is not possible.
What you can do is:
Save the modified HTML code to your PC (I don't know if it helps you).
Use an extension that allows you to run a JS code automatically on page load (there are bunch of this kind of extensions), and with that JS code you can manipulate the DOM the way you wish to. Yea I know, that solution involves maybe long code writing but this is the way you can change the new DOM every time - automatically.
I have a website and need to transport a form to another website. I however only need certain tags not the whole form block with all it's tables and divs.
When selecting a html-tag in inspector, I can copy inner HTML, outer HTML or CSS styles but how can I just copy that very exact tag I selected without it's child nodes, just the selected line in HTML code?
I ask this because the HTML is minified and I can't just select and copy a tag in source. Same when I chose "copy outer HTML" I get the whole HTML subtree minified, means everything in one line.
How can I quickly search and copy certain tags from the three without grabbing everything in the branch?
Edit: People, thanks for all your suggestions but please note that I wrote about a MINIFIED HTML page I have here.
Just open Debugger near Inspector
Then find page file... then copy with any select range as you want
UPDATE
if it minify click here
If I understood what you want try this
Since your question seems unsolved yet, let me come up with a creative approach I use for similar tasks from time to time:
(1) Creative solution: Page manipulation
If you don't have a javascript framework of your choice (e.g. jQuery) on that page, add it using a browser-extension that adds it when page has loaded.
Then you write a bit of javascript code that removes unwanted child elements of the desired parents in a loop or so. That sounds like lots of work but since you asked this question I assume you need dozens if not hundreds of elements so it might be worth taking the time to write such loop(s).
When the code you injected processed the page and removed everything you don't want, you can then copy the code like mentioned by others here.
(2) Alternative solution: Beautify the code beforhand
If the given solution(s) don't work for you, one could try to beautify the code by copying the source to a webpage that auto-indends html/js code. You could then optionally save it into a html-file and approach that one again like mentioned here before.
Sidenote
If either this idea is too much work or you need this frequently you are probably approaching this on the wrong side. When working on frontend (only) you are always limited to what you have. If you could approach from the backend you could then build from the data/information whatever you need. If you could provide a bit more information about why you need this and how much code you are talking about one could maybe come up with a more sustainable solution!
This might be a weird question but i do this often enough that I'm going to ask, When i am making some adjustments to the look of my web page via CSS I often just inspect element and put in the changes and then when it looks right i copy and paste those changes back to my css sheet and save (the css files are located on my remote server uploaded with FTP), occasionally i accidently refresh the page without the css properly copied and loose my css, is there a way to "get back those changes after refreshing my page or is there a tool i could use to automatically save/back them up so they don't get lost?
You can do this with DevTools Workspaces: https://developer.chrome.com/docs/devtools/workspaces/
You can only make changes to CSS in a file, not inline CSS or HTML markup.
I hack styles into pages and copy them over in the same way that you do.
To answer your question, I don't know of any way to get the changes back (clearing changes is the whole point of 'refreshing'), but here are 2 alternative options:
Make smaller changes (I try to focus on a single element/node at a time)
There are a lot of chrome extensions that tackle this type of problem
https://chrome.google.com/webstore/detail/devtools-autosave/mlejngncgiocofkcbnnpaieapabmanfl?hl=en
I don't have direct Host or Superuser access to DNN and the way our system is set up I wont get access to those accounts. It is a policy where i work. Is there ANY way to get your HMTL/CSS to actually work as you put it into the DNN HMTL editor? I have tried adding things like an accordion sidebar, tabbed area, and a simple CSS image hover. DNN takes my code and jumbles it up so that it does not work correctly. I have taken markup straight from my text editor, into dnn (that was working fine in the browsers before i took it into DNN) and it shows up, but does not act like it should or the code gets jumbled and breaks and I spend an hour trying to fix it EVERY TIME.
Has anyone out there had the same issue, or any suggestions, tricks to get your markup to work correctly in DNN.
Thanks,
Yes and no, you can't add scripts in the html editor and if you are copy-pasting something that has a FORM element, it won't directly work without modification.
One possible way to keep your javascript working is to move it to the Header or Footer options in the module options of that module instead of the content.
As for if your code contains a FORM element, you can use javascript to modify the Asp.NET FORM element to suit your need, see http://dotnetnuke.bz/Articles/tabid/156/DotNetNuke/98/How-to-Include-Multiple-Forms-in-DotNetNuke.aspx for more details.
When viewing a webpage, I would like to copy a selection of text with its html formatting in one piece.
Meaning if some text is in bold and blue, I want the tool to create a style or class in the html which makes the text blue. Everything is contained in the produced html.
I have downloaded a similar plugin but the classes definitions are still external which means I have to get them separately. A non technical user would be at a loss here. I want the user to be able to copy and paste to a new webpage and that page just just works properly because the html copied contains everything.
This doesn't have to be a FF plugin. It could be IE or a Windows app.
I think you may be able to accomplish this by using the Firebug for Firefox extension. I often use it to export the content of a web page for use rebuilding a similar object. Is this still too technical? Firebug is a powerful, viable option that it is worth learning, I think.
I think the copy operation does this already. If I copy this page and paste it in a WYSIWYG editor such as TinyMCE (included in Wordpress), I get the formatting. For example the text of this page is (as pasted):
<h2>Firefox plugin to copy text with its formatting Intelligently?</h2>
The HTML markup is copied, but not external CSS. I suspect creating a piece of CSS that would apply to your standalone snippet of code the style it had within the DOM hierarchy would be horribly difficult if at all possible.
Try SnappySnippet, it's a Chrome extension that allows to copy html and all the related css style of an element. It integrates itself into the Chrome console. I hope this helps
This seems to be what you're looking for:
Web Design Pirate:
https://addons.mozilla.org/en-CA/firefox/addon/web-design-pirate-for-devtools/
It creates a new "Pirate" tab in the developer tools that lets you grab the elements you want, including all associated CSS.