I know I can edit HTML elements in Chrome / Firefox inspector. But how can I save changes to the local file on my desktop?
Chrome is able to do some stuff via workspaces. Open devtools go to Sources add folder to workspace pick your index.html (or whatever) edit and save by clicking ctrl+s. Refresh browser and you'll see that changes are permanent. You can't however go to Elements/Inspector pick some tag change it and save because "DOM!==HTML".
Yes you can edit a locally saved html file in IE9 by right clicking the page in the browser window, choosing "view source" which opens in notepad and editing the code and then go to file and save the changes.
You can do the same thing In Firefox by opening Firebug and then opening the Firebug editor which is notepad.
I just thought I remembered doing it by just right clicking the page and opening "view source" in Firefox just as I did in IE9.
View Source in Firefox allows you to play around with your code and edit it but to save and edit the actual working file requires opening it up, making those same changes, then saving. I'd suggest using the developer tools and once you have what you want, copying and pasting the altered source code to use in the original file. If you have firebug and the firebug editor I think you may then be able to actually update the file itself. Chrome allows you to edit JavaScript like that but I'm not sure about HTML and CSS
I have the same problem, how to edit the DOM html and save the results. On my PC I can effectively do this operation using Scratchpad by changing the file type to all, open the file, edit it, do a save, then refresh the page. With a bit of messing around you can copy and paste from the Inspector to the Scratchpad. It's pretty hacky, but it does work.
However, one of my students who is using a Macbook AIR can't edit html files with ScratchPad, she can edit .js files, but all the html files are grayed out and can't be clicked. Bottom line is I don't know if this "solution" works for all systems.
Related
When I am using Visual Studio code, I am coding in HTML and CSS.
When I open the Browser Preview button, it shows the changes I am making and some things appear as I want it to be.
However, when I download the saved file as an index.html file, the look does not appear the same as the Browser Preview.
What should I do?
File extension must be .html
Then, first of all make sure that all the time you are saving your file using ctrl+s. You can do this automatically by changing in setting.
You can reinstall any browser preview extension like this one.
Restart the VScode and check again whether it's working or not.
Also, You can setup your vs code again.
I'm developing a basic web page with css file on my local machine and testing by opening the html file in the browser straight from the filesystem.
This works, but now since using the Chrome developer tools to play around with different styles by editing the css file under the Sources tab, whenever I refresh the page none of the CSS loads until I again edit it in the sources tab - just adding a return to the end is enough to load all the CSS.
Also, occasionally when refreshing the page, the Sources tab shows the contents of the css file as corrupt (a load of random characters)
I've run the css through a validator and that says it is all fine and there is no javascript on the page
I'm not a web developer so probably missing something obvious...
This is happening because you are editing css inside the Inspect Element (Chrome developer tools).
This is because the css literally lives on a webpage and it is pulled from your actual css file on your desktop (css file from the folder of your website).
Because of this, you are never actually changing an actual css on your computer, just in the browser, and that is temporary, because the same old css from your computer will load everytime you reload the page (untill you modify the css on your computer).
You should edit your changes in your actual css file on your computer inside your text editor (notepad++, visual studio code, atom, sublime text, etc ...).
That way, it is going to work as you want ! Hope you understood what I meant, if not, just tell me, so I can clarify again :)
Add this to the nginx configuration:
http {
include /etc/nginx/mime.types;
....
}
this solved it for me.
Thanks
When using the Microsoft Edge browser, by default when you open a PDF it will open the PDF in a new tab using the built-in PDF viewer. To avoid this, you can adjust the browser's settings: Toggle on the "Always open PDF files externally" option. This works great. However, it presents a separate issue. Our internal applications use embedded PDFs in iframes. When the external toggle is set to on, these PDFs will not show in the iframes. This doesn't happen in Chrome. Has anyone else experienced this and know a work around?
I've tried removing the type="application/pdf" from the iframe tag to no avail. I can't find anything else online.
It looks like an expected result because you have enabled the option Always open PDF files externally.
So MS Edge browser is giving you an option to download the PDF file and open it using the desired app.
You said this doesn't happen in Chrome browser.
If you enabled the Download PDF files instead of automatically opening them in Chrome option then you will notice the same result in the Chrome browser.
Output in the Chrome browser:
If you click on the Open button then it will download the PDF file.
I did not get any solution or a workaround for this issue.
If you think that there should be an option to load the file in an iframe if Always open PDF files externally option is enabled then I suggest you click on the Send Feedback button in the MS Edge browser and try to provide your feedback about it to the Microsoft.
I posted feedback suggesting that an exclusion/inclusion list be in included but the simplest way would be to treat the frame as part of the session. But this is not Microsoft it is the Chrome projects issue.
I'm studying HTML/CSS and doing a single-page project using WebStorm and Chrome. Normally I test the way my page running Chrome in WebStorm which results in opening http://localhost:63342/ in my browser address line.
After I finished my project I closed WebStorm and ran it again in Chrome, but this time I open it by clicking on the shortcut on my desktop.
To my surprise, the way the page looks was different from the one that I saw when I opened Chrome through WebStorm.
The question is: Why so? It's the same HTML/CSS code, the same browser.
You can use http://brackets.io/ as an alternative. It has a similar feature called "live preview".
It seems that there is no style applied to your page. If you have your css in a separate file, my guess is that WebStorm doesn't locate your CSS file or you are not referencing it correctly in your html. Try looking at the "Sources" tab from the Chrome Developer Tools (F18) and see if it loaded the .css file.
It turned out that it had something to do with the page scale. When I press cmd and + and the page zooms in, it gets a slightly different look.
I have a folder on my computer, which has an index.html:
PDF
And in the folder I also have mypdf.pdf.
I'm trying to make it so that I can have the option of opening the pdf (or saving it) when I click on the link. However, the browser doesn't do anything when I click on it.
How can I do this? What is the html for this?
That is actually browser behavior. The only way to force that would be with javascript.