Is it possible to make changes to my sass file using the Chrome dev tool's element tab?

Within my project, I have a Sass file where I set the sourcemappath using node-sass for compiling. By mapping my .css file on my system, any changes made through the source panel are automatically saved to the disk and compiled back by node-sass. However, I am unable to see an auto-reload of my generated css, leading me to believe it is enabled by default.

I am looking to preserve the modifications I make in the element panel. When I select the CSS file from the element panel (which is a SCSS file working through sourcemap), it does not display my changes.

Is there a way to retain my alterations made in the element panel? Despite making changes that do not appear in the source panel, they are still visible upon refreshing but do not reflect in the actual file itself.

htmlcssdebugginggoogle-chrome-devtools

Answer №1

This unique feature is currently in the testing phase, hidden behind flags as it may be unstable and cause disruptions. If you want to give it a try now, follow these steps:

  1. Enter 
    chrome://flags/#enable-devtools-experiments
    in your omnibar
  2. Activate the flag for Experimental DevTools Features
  3. Restart your browser
  4. Access DevTools and navigate to Settings where you will find a new Experiments tab on the left side
  5. In the experiments tab, enable the Live SASS option
  6. Restart DevTools

Now, any changes made in the Elements panel should persist in your Sass code, provided that it is properly source-mapped.

This exciting feature, along with others, was highlighted by Paul Irish during his presentation at the I/O 2016 talk on Accelerating Your Workflow.

Answer №2

Last updated in January 2020 - Chrome Version 79 on MacOS Catalina 10.14.6

  1. Open Chrome developer toolbar
  2. Go to Settings
  3. Select Workspace
  4. Click on the 'Add folder' button
  5. Enter the path of your working directory
  6. Navigate to the 'Sources' tab located between the console and network tabs
  7. Use command + P (on Mac) to search for the desired file, for example, main.scss
  8. Make necessary code changes and ensure they are correct

I discovered that changes made in both the Dev toolbar and Editor can be synced seamlessly :)

Answer №3

It doesn't seem feasible to achieve what you desire in that way. Consider exploring alternatives such as LiveReload for achieving similar behavior. With LiveReload, you can modify the code within your IDE, compile it, and the tool will automatically detect changes to the compiled .css file on the filesystem, refreshing it in your browser.

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

Steps to modify the background-color of an iFrame using CSS

I am attempting to extract HTML code from an iframe and apply a background-color to the class: class="body" The structure of my HTML source is as follows: <iframe id="sc_ext_XT29EK" class="sc_ext" width="100%" height="1300px" frameborder="0" src="some ...

javascriptjqueryhtmlcssiframe

Tips for arranging cards in a stacked position: To create a visually

I'm currently developing a project using react typescript, and I need to showcase various projects in the form of cards. However, I would like these cards to be displayed in a stacked layout like this Here is the component for displaying the projects ...

javascriptcssreactjscomponentsantd

HTML5 Websocket communication lag when using node.js

Hello everyone, thank you for taking the time to read this. I am currently utilizing NodeJS with the WS module on the server side and HTML5 WebSocket API in Firefox on the client side. The operating system being used is Windows 7 64 bit. I have encountered ...

javascripthtmlnode.jswebsocket

What is the best way to align content evenly between the logo and navigation items in the Bootstrap navbar?

Welcome to my HTML code: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <img class="logo" src="/images/logo.png" alt=""> < ...

cssbootstrap-4

Real-time Property Availability Widget

I need assistance with creating a website for a homeowner who wants to rent out their property. The client requires a feature that allows them to log in and easily mark individual days as available or unavailable for rental by choosing specific colors for ...

javascripthtmlwebcalendarwidget

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

javascriptjqueryhtmlcss

Switch up the action for the middle click?

Is it possible to reconfigure the functionality of right click and middle click so that they behave as left click when activated within a webpage? If so, how can this be achieved? ...

javascripthtml

Slice cleanly through the heart of the boundary

I want to create a unique border effect when hovering, similar to the one shown in this image: https://i.sstatic.net/JsXVJ.png I'm not quite sure how to define this border style. Any suggestions on how to achieve it? .text { width: 100px; hei ...

htmlcss

What is the procedure for downloading a file within a brackets-shell application?

Currently, I am utilizing Brackets-shell to develop a desktop packaged application designed for both Windows and OSX. This application, which operates within the Brackets shell environment, has the capability to access dynamically generated Excel sheets an ...

htmliframebrowseradobe-bracketsbrackets-shell

Mobile-friendly website with consistent design across all devices

Can you help me figure out how to make my website appear at its normal size on mobile devices? I want the entire website to be visible without the need for scrolling, but still allow users to zoom in if needed. I've already tried: <meta name=" ...

htmlcsstwitter-bootstrap

Preventing browser freeze by using window.addEventListener in React

I'm new to React and I'm facing an issue where the code seems to freeze the browser (I'm using Chrome) when I click multiple times on the window. Can someone help me understand why? import "./App.css"; import { useState } from &quo ...

javascriptreactjsdebugging

The border of the cell in the top row only partially overlaps with the margin area

Have you noticed how the left border of the first cell doesn't line up with the margin area of the table? This peculiar phenomenon seems to occur only in the first row: https://i.stack.imgur.com/qMWCh.jpg In all other rows, the border aligns proper ...

css

Switching the navbar state from a regular mode to a collapsed mode can be done manually

I need help with my navbar design: <nav class="navbar fixed-top navbar-expand-sm navbar-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle=&q ...

javascripthtmlnavbarbootstrap-5

Implementing Custom Font Awesome Icons in Your Angular Project

I recently upgraded to a fontawesome subscription with a paid plan and have successfully created some custom icons. Now, I'm looking to integrate these icons into my angular app. Here are the dependencies listed in my package.json file: "@fortawe ...

javascriptcssangularfont-awesome

Changing HTML5 input type date into a string representation

Here is my PHP code snippet: <?php include 'config.php'; if(isset($_POST['submitbtn'])){ $date = $_POST['datefield']; $newDate = date("Y-m-d", strtotime($date)); $result = mysql_query("Call seat(".$newDate.")"); if($resu ...

phpmysqlhtmlstored-procedures

Show either the abbreviated or complete form of the text

Initially, the default display should show the shortened version of each element (one line with "..." included). All items must consistently be shown in either the shortened or full-length version. If all items are in shortened mode - clicking on one item ...

javascripthtmlcss

Bulk uploading HTML and CSS files to Squarespace made simple

Hello amazing people of the Stack Overflow community, I'm still learning the ropes around here (so please go easy on me) and I have a question about uploading HTML/CSS + Packages in bulk to my website. I have some experience with the code injection/ ...

htmlcsssquarespace

Is it possible to keep the screen in the same position using Javascript or jQuery, even after refreshing the page?

On my page for live scores results, there are two sections - the top section displays live match results and information, while the bottom section is dedicated to comments. When I submit a comment, the page refreshes and goes back up to the information sec ...

javascriptjqueryhtml

Showcase CSS button within Outlook

After creating a CSS gradient button using Button Maker, I encountered an issue with Outlook not displaying it properly due to their CSS restrictions. As a result, I am looking to have a simpler button design for Outlook without success in filling the back ...

htmlcssbuttonoutlooknewsletter

Struggling with a dynamic HTML table using Mustache and Icanhazjs technologies

I am encountering an issue while attempting to construct a dynamic table using Icanhazjs (Mustache). The table data is consistently rendered outside the table tag, resulting in my data not being displayed within the table itself. To observe the output, pl ...

htmlmustacheicanhaz.js