I edited a webpage with customized elements. The elements were edited with the chrome F12 dev tool.
The problem is, every time I refresh the webpage, my edited elements will be reverted back to the originals.
This is what I want to do: next time when I load the same webpage, I want to have my edited elements, instead of the original elements. This way I don't need to manually edit those elements again.
Is there a simple way to do it?
I checked this Save Chrome dev console html changes but it seems not too helpful for my case.
One possible solution is to create my own webpage, and then use the edited elements in my webpage. Not sure if this will work; and it involves a lot of work.
Related
I'm trying to take the full html source of the tab in
this page
I want to take the source of
this tab
But unfortunately, the html I'm getting is not completed.
I registered a gif to explain it better
That select list is showing just when I inspect the element, while If I just insect the element with the list closed, it doesn't return any list html.. is it created dinamically when the user click on it?
I've tried to expand all the codes, but unfortunately it seems the html of every list is not appearing.. It might be created just when I open the list?
Is there a way to get the lists html?
Hope I've been clear.
Not sure what you want to save, but by inspecting it sources, it seems that the website use the way of removing and appending the html source which means only you pressed the expanded button, Javascript will append it (different options) to the body, otherwise it will not shown in the element tab.
I don't think you could get all html tags in just 1 try because the website use Javascript to append the html and you can't see it in the element section in console when the element is being removed.
Example:
You can save the page if you want. Just save it with Ctrl+S and you will find the basic source in there along with the stylesheet and other scripts.
I use a site at work that has unordered list "ul" with a lot of "li" elements without borders, I would like to always highlight the "li" elements to have better readability.
What I do at this moment is right click the page and open the inspector and add this line:
<style>li:hover {background-color: #ffff99;}</style>
It works but I'm wonder if I can do a plugin for this or if there is another way to do it automatically (I have already send a request to the developer of the site to request this change but while I wait I would like to know what would be the best approach to automate this task)
The list look like this:
File.txt 85215165
File2.txt 96312121
File3.txt 41212123
File4.txt 65623443
File5.txt 69532055
... and so on
(It's not a continuous string, the file name and the number are elements inside the one "li" element and I'm not able to select them at the same time with the mouse)
And it has no style so it's difficult (at least for me) to see which number in the right match the file name in the left.
Note: The list is generated with a script and when I try to see the code of the page (right click see source code) I don't see it, I just see the script, that's why I do it with the inspector
This may solve the issue:
Stylish or Stylebot -- Chrome plugins -- both seem to add your preferred CSS on top of the specific websites you choose.
Paste this in the browser console, slightly faster and easier than editing HTML tags from within the tree in the inspect element tab.
document.head.insertAdjacentHTML("beforeend", `<style>li:hover {background-color: #ffff99;}</style>`)
My problem is that I linked the CSS correctly when I created my HTML file, but then when I try to edit the CSS the other day, it just didn't update my HTML file and I did save it of course. One way I can get around this is by deleting the CSS in my htdocs and creating a new stylesheet with the exact same contents then linking the new one to my HTML. Can you guys tell me why is this happening and how can I prevent this from happening again?
I think that the problem is with cache. You can try running the site in an incognito/private window of your browser.
You can also inspect the page and see if the new styles are loaded. You can also try Empty Cache and Hard Reload option when you right click the reload button on chrome browser while inspecting.
one way you can prevent it is by doing all your css in the actual html file like so
<head><style></style></head>
I need to view all source HTML in plain text in one place. I need it from an already loaded page. CTRL+U (View Source) refreshes the page. The page I'm trying to view can only be accessed via proper form submit. What I really want is for CTRL+U to not refresh the page.
I need the HTML source of an already loaded page added to my clipboard.
I think none of the other answers really answer your question.
You want the exact response from the server, not the current DOM, and you want it with the exact request headers that was sent the first time.
To do so, open the Chrome Dev Tools and select the "Network" tab.
The very first request should be the page you requested. Click it and select the tab "Response" on the right side to get the exact response the server gave you.
Right click-> inspect element anywhere you want to see the html, it still show the code of all the page ans you can modify the value of html/css directly in it.
The only answer is the one Dor1000 provided himself in a comment:
dev tools, elements tab, right click html tag, copy, copy outer html.
He wants the current HTML (after javascript or any other modifications, not the original source HTML).
I've already mapped the necessary files to the local resource - however, while that does allow me to save any changes made to a file in the Sources panel, I was wondering if it's possible to automatically save changes to CSS made in the Elements panel. Otherwise at the moment, any changes made to the style in the Elements panel seem to exist only there.
I remember at some point there used to be a little indicator of the file and line number next to a class/id etc. in the Styles tab of the Elements panel - surely it can't be that hard to simply 'update' any changes to that style rule considering Chrome knows exactly where it's coming from (in the case that it's a stylesheet and not an inline style?). It would be a great relief to my workflow.
The answers to this similar question are obsolete.
When you have finished making your changes in the Elements tab. Next to the style there should be a link with the file name there, something along the lines of site.css:4 or similiar, if you click on that link it will open up the sources tab with that certain page what you have editied containing the modifications. Then you can go to save as, and then save the document from there.
I hope this helps you out :)