When using Edge browser developer tools local override feature, changes made are not visible after closing the developer tools

Even though I am discussing the issue with the edge-browser, it also occurs in the chrome-browser

Instructions to Replicate

  • While many may know me as a developer, I have a passion for customization and unique fonts. One font that has caught my eye recently is quicksand

  • I proceeded to download and install it on my PC
  • I selected a simple website, such as wikipedia

Current Website Appearance

https://i.sstatic.net/pLJn1.png

  • I navigated to edge://settings/fonts (in Chrome chrome://settings/fonts)
  • I switched the sans-serif font to Quicksand

Updated Website Look

https://i.sstatic.net/ViJja.png

  • As you can observe, the body font has successfully changed but the heading font remains unchanged
  • Despite trying various font options like sans, standard, fixed-width, the header font remained unaffected
  • Upon inspecting the website, it was evident that a custom font was being used in the header:
  • font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
    https://i.sstatic.net/Kj7SK.png
  • I opened the indicated file highlighted in green color ...1
  • In the sources tab, I set the overrides folder to 
    C:\Users\nepto\OneDrive\Desktop\EdgeOverrides
    (as specified in the documentation)
  • Following from step 1, I added to the overrides folder as shown below https://i.sstatic.net/6FGnA.png

Current Site Structure

https://i.sstatic.net/zDUG1.png

  • I then opened that local file (
    C:\Users\nepto\OneDrive\Desktop\EdgeOverrides\en.wikipedia.org\longurls\load.php%3-fe414f3.php
    )
    using Notepad
  • By pressing Ctrl + H, I replaced all 3 occurrences of 
    'Linux Libertine', 'Georgia', 'Times', serif
    with inherit and saved the changes

Revised Appearance

https://i.sstatic.net/Xh0CP.png

  • As depicted above, I am delighted by the font change in the header
  • However, even after reloading, the header font remains as Quicksand

Issue Arises

  • Next, I closed the developer tools
  • The font still displays as Quicksand
  • But upon reloading without the developer tools open, the changes revert back and the Quicksand font disappears
  • Fearing this inconsistency, I reopened the developer tools and the Quicksand font reappeared
  • Hence, the font I desired (Quicksand) only functions when the developer tools are active

Please assist me in resolving this so that the font remains consistent even when the developer tools are closed

cssfontscustomizationmicrosoft-edgedeveloper-tools

Answer №1

There's no need to worry, you didn't miss a thing. Unfortunately, making adjustments to the webpage is impossible when the F12 DevTools are closed.

The appearance of the webpage in the browser is determined by the server source codes. The purpose of DevTools is solely for testing and debugging; it does not have the capability to modify the server source file. The Override function merely overrides certain aspects of the code without altering the server source code itself. It's important to note that all functions within F12 DevTools will only operate when F12 is open. This is why attempting to use these functions after closing F12 and refreshing the page will prove unsuccessful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Floating Panels: A Guide to Creating Dynamic User Interfaces

In the process of developing an angular app, I require a dock-able panel. After researching available controls online, I found them difficult to use and they compromised our screen layout. As a result, I am considering building a custom dock panel from s ...

htmlcssangulardockpanel

Adapting Classes in Javascript Based on Screen Width: A Step-by-Step Guide

I'm dealing with two separate menus - one for mobile version and one for PC version. However, the mobile menu seems to be overlapping/blocking the PC menu. How can I resolve this issue? I've attempted various solutions such as removing the mobil ...

javascripthtmlcss

Is it possible to prevent website backgrounds from duplicating?

When I visit my website and zoom in using CTRL +, the background image starts duplicating instead of just resizing. Other solutions I've found only stretch the image, which is not what I want. My website has a comments section that can make the length ...

htmlcss

Position images to the left, stacked on top of each other, with text centered on the right side of the picture

I have 5 images that I want to stack on the left side, with text displayed beside each image to the right and centered vertically. I've managed to stack the images, but the text is appearing below them instead of beside. Yes, I'm trying to creat ...

htmlcss

What is the method for adding the square root symbol to a button's value?

I am attempting to display the square root symbol inside a button, but I am having trouble making it work. Below is my button code: <input type="button" id="sqrt" value="sqrt" onclick="insert function here"> For the value, I want the square root sy ...

csshtmlbuttonsqrt

Tips for locking the position of a table header and allowing only the table body to scroll

I have designed a table with tbody consisting of 2 tr elements. One tr is used for hiding/showing data. I am trying to keep the Table header fixed while only scrolling the table body. However, as I am using angular js ng-repeat on the tbody, I am encounte ...

htmlcssangularjstwitter-bootstrap-3

Verify the visibility of the toggle, and eliminate the class if it is hidden

I have implemented two toggles in the code snippet below. I am trying to find a solution to determine if either search-open or nav-open are hidden, and if they are, then remove the no-scroll class from the body element. $(document).ready(function() { ...

javascriptjqueryhtmlcss

Struggling to center a modal at the exact middle of the page using Bootstrap 5

My navigation bar has a button that, when clicked, triggers a modal to appear at the top of the page. I am trying to center it horizontally. Here is the HTML code: </button> <!-- </button> --> <div class="text-dark "> < ...

htmlcssbootstrap-modalbootstrap-5

Click event triggers the loading of a page

Recently, I found a simple jQuery event that loads a page into an iframe within the corresponding div when clicked. You can check out the JS Fiddle example here Now, my goal is to achieve the following: Instead of using separate codes for #fra ...

jqueryhtmlcssiframe

Changing styles with the use of bootstrap.css themes on the fly

I'm experimenting with toggling between a custom dark and light theme in my MVC application. On the _Layout.cshtml page, the default theme is loaded by the following code: <link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original. ...

javascripthtmlcssasp.net-mvc

Exploring the wonders of Bootstrap 3 panels and stylish floating images

Is it possible to create a responsive design using Bootstrap 3 panel along with a floating image positioned next to it? I want the panel to seamlessly fit into the available space, without overlapping the image. Can anyone provide guidance on achieving thi ...

htmlcsstwitter-bootstrap-3

The sub-menu positioning feature functions properly in Chrome and Safari, but is not compatible with Internet Explorer and Firefox

Working on a website for a gaming community, known as http://www.quad-gaming.com/. All is running smoothly except for the dropdown menu under "Login" on the right side of the navigation bar. It behaves properly in Chrome and Safari, but in IE and Firefox, ...

htmlcssmenunavigationsubmenu

Space between Logo Header and Navigation Bar

Recently, I attempted to create a new header with a responsive logo and menu. After seeking guidance from StackOverflow experts, everything seems to be functioning correctly now. However, I am facing an issue regarding the gap between the header and navba ...

htmlcss

What steps should be taken to transform a transposed table into one that can be scrolled horizontally?

In the process of creating a comparison table for products, I have designed a table with vertical rows. The header is positioned on the left side, with two or more product descriptions displayed in vertical rows within the table body. To accommodate a scen ...

htmlcsshtml-tablehorizontal-scrolling

The menu in IE7 seems to have a mind of its own, appearing and

Having trouble with my menu displaying correctly in IE7. It seems to be a stacking issue: the menu initially appears but disappears once the header image and rest of the page load. I've tried adjusting the z-index values in both the menu and its paren ...

cssstackinternet-explorer-7

Arrange elements in a TD in a row side by side using HTML

I just added a slider next to an input and added an input box after the slider. The problem is they are underneath my first input. I want them all side by side in the TD tag. Please help. Let me know if you need more code: <td>$ <input name=" ...

htmlcss

`Overlapping navigation against a backdrop of backstretch image`

Is there a way to make the navigation display in front of the background image? Currently, the navigation becomes un-clickable and is hidden behind the image once it loads. ...

cssimage

Arrange divs in a float-stacked formation next to each other, without the need for a

I'm facing a challenge trying to display stacked divs in a column-like manner. Unfortunately, I can't directly edit the HTML due to the constraints of the application. The issue I'm encountering is that the right column is appearing lower do ...

jqueryhtmlcss

Tips for successfully passing a Prop using the Emotion CSS function

Passing props through styled() in Emotion is something I'm familiar with. For example: const Container = styled("div")<{ position: string }>` display: flex; flex-direction: ${({ position }) => (position === "top" ? "column" : "row ...

cssstyled-componentsemotion

Increasing the size of the entire page can be achieved using the three.js dom element

I am currently working on creating a 3D viewer using three.js. My goal is to have the viewer take up the full height of the screen while also leaving space for a side panel. The vertical layout is functioning properly, but once I add the render's dom ...

javascripthtmlcsslayoutthree.js