4

My files are stored locally; I changed the color of the .paragraph class from #FFF to #97a4b4; I press CTRL+S and the asterisk(*) next to my CSS file disappears;

If I press F5 on the page and reload it, the changes aren't saved and the color returns to #fff;

Is this a bug?

attached screenshot ->

Converesly, if I edit the width of an element in the elements panel, in Chrome devtools, I want to save this on the original *.php file;

How can I proceed to achieve this effect?

See attached screenshot ->

boop_the_snoot
  • 3,209
  • 4
  • 33
  • 44
Johnny
  • 479
  • 1
  • 6
  • 15
  • 1
    I know nothing about web, so i hope [this](https://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools) might help you. Alternatively you can refer [this](https://productforums.google.com/forum/#!topic/chrome/UbmrXYETvU0) and [this](https://groups.google.com/forum/#!topic/google-chrome-developer-tools/rzPRvlgjE0w) – boop_the_snoot Aug 07 '17 at 03:57
  • This webpage has some insights related to this: https://developers.google.com/web/tools/setup/setup-workflow – Johnny Aug 07 '17 at 03:58
  • Also refer [this](https://stackoverflow.com/questions/22879913/chrome-devtools-sass-source-file-doesnt-get-saved-on-disk?rq=1) – boop_the_snoot Aug 07 '17 at 03:59

1 Answers1

2

For point no.1

To be able to edit (local) source files in Chrome DevTools one needs to:

1.Add project folder as a Workspace (DevTools - Settings - Workspace - Add folder)

2.Map the source file provided by webserver to the local file by right clicking in the Elements left panel.

(This seems, somewhat, redundant to me, since the site I opened was already from a local folder.)

More on the topic here: https://developers.google.com/web/tools/setup/setup-workflow

Still missing an answer for point no.2

I need an easy way to edit html in Devtools after finding the item in the DOM by selecting said item on the site, editing the html in the DOM and (somehow) preserving the changes. Missing a quick method to point towards it in my *.php file that is now mapped in the Sources tree, so I don't have to scroll ages (and use CTRL+F) until I find it;

That could be accomplished (the slow way) in my text editor, outside of Chrome, and the Mapped Local Folder would, therefore, be redundant for this workflow.

Johnny
  • 479
  • 1
  • 6
  • 15
  • 1
    Regarding #2, changes in the Elements panel aren't saved to your Workspace. Try editing the file from the Code Editor in the Sources panel. – Kayce Basques Aug 08 '17 at 18:39
  • yup,I tried it and it works; need to find a way to quickly go from the exact php row that I find in the Elements panel to the one in the original file that is present the Sources panel. – Johnny Aug 10 '17 at 15:50
  • 1
    FYI there's no true "jump to this line in Sources panel" shortcut, because many sites populate the DOM via JS. But I'll think some more if there's any indirect shortcuts... – Kayce Basques Aug 10 '17 at 16:46
  • 1
    Are you aware of the "search text across all sources" keyboard shortcut? `Command`+`Option`+`F` on Mac, `Control`+`Shift`+`F` on Windows / Linux. This opens the **Search** tab in the Drawer. From here you could copy-paste the element into the search box. That should jump you to the exact line fairly quickly... – Kayce Basques Aug 10 '17 at 16:54