Less compilation, LiveEdit and no immediate page refresh

Hello! Unfortunately, I couldn't reproduce it in a simple project with a less file watcher and an HTML page. Could you please provide more details? 

Which IDE version do you use? Does it help to use “Reload in browser” option in the debug tool window?

Could you please share a screenshot of your settings `Settings | Tools | Web Browsers and Preview`? Also, a video showing the steps you take and current behavior would be very helpful.

PhpStorm 2023.2.3
Build #PS-232.10072.32, built on October 13, 2023
 

The problem for explanation is too  simple. 

1. I make the LESS changes, page view on the second display, no changes, but exists if I change HTML, JS on CSS.

2. I opened the generated CSS in Notepad ++, yes the file was compiled, I see the changes. The watcher is working, but no live reload.

3. The way to force livereload to fire, I also opened the generated CSS in another tab in Storm:

- Focus the browser and Storm with opened LESS file back (click on one window, click on another)

- Switch to CSS tab. Especially to CSS tab, no any reload if I switch to HTML or JS file

Could you please share a screenshot of your settings `Settings | Tools | Web Browsers and Preview`? Also, a video showing the steps you take and current behavior would be very helpful.

You can upload them to https://uploads.services.jetbrains.com/ and let me know the upload ID.

Video uploaded

Upload id: 2023_12_08_Ls8SKiJGyomjMhbvEZ652w (file: Phpstorm watcher prolem.mp4)

Watcher XML code

<TaskOptions>
  <TaskOptions>
    <option name="arguments" value="$FileName$ ../css/$FileNameWithoutExtension$.css --source-map" />
    <option name="checkSyntaxErrors" value="true" />
    <option name="description" />
    <option name="exitCodeBehavior" value="ERROR" />
    <option name="fileExtension" value="less" />
    <option name="immediateSync" value="true" />
    <option name="name" value="Less" />
    <option name="output" value="../$FileNameWithoutExtension$.css:../$FileNameWithoutExtension$.css.map" />
    <option name="outputFilters">
      <array>
        <FilterInfo>
          <option name="description" value="" />
          <option name="name" value="" />
          <option name="regExp" value="$MESSAGE$\Q in \E$FILE_PATH$\Q on line \E$LINE$\Q, column \E$COLUMN$" />
        </FilterInfo>
      </array>
    </option>
    <option name="outputFromStdout" value="false" />
    <option name="program" value="lessc" />
    <option name="runOnExternalChanges" value="true" />
    <option name="scopeName" value="Project Files" />
    <option name="trackOnlyRoot" value="true" />
    <option name="workingDir" value="$FileDir$" />
    <envs />
  </TaskOptions>
</TaskOptions>

Will it help if you hit Save after making a change OR set “Reload page in browser: On change” in `Settings | Tools | Web Browsers and Preview`?

Tried the both, no difference

The Output path to refresh in your Less file watcher settings (../$FileNameWithoutExtension$.css:../$FileNameWithoutExtension$.css.map) doesn't match the actual output path (../css/$FileNameWithoutExtension$.css). As a result, the IDE virtual file system is not synchronized with external changes once the css generation completes, and the IDE doesn't see the generated files until you move the focus from the IDE and back. Please try changing your watcher settings.

Fixed, thanks, looks like it's better to use strict $ProjectFileDir$ for better paths understanding

<TaskOptions>
 <TaskOptions>
   <option name="arguments" value="$FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map" />
   <option name="checkSyntaxErrors" value="true" />
   <option name="description" />
   <option name="exitCodeBehavior" value="ERROR" />
   <option name="fileExtension" value="less" />
   <option name="immediateSync" value="true" />
   <option name="name" value="Less - project in root, /less -> /css" />
   <option name="output" value="$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map" />
   <option name="outputFilters">
     <array>
       <FilterInfo>
         <option name="description" value="" />
         <option name="name" value="" />
         <option name="regExp" value="$MESSAGE$\Q in \E$FILE_PATH$\Q on line \E$LINE$\Q, column \E$COLUMN$" />
       </FilterInfo>
     </array>
   </option>
   <option name="outputFromStdout" value="false" />
   <option name="program" value="lessc" />
   <option name="runOnExternalChanges" value="true" />
   <option name="scopeName" value="Project Files" />
   <option name="trackOnlyRoot" value="true" />
   <option name="workingDir" value="$FileDir$" />
   <envs />
 </TaskOptions>
</TaskOptions>