Unable to change property values w/ element inpector when previewing in broswer

[seahawksean80]

When I preview a Dreamweaver project in either Firefox or Safari (using the Real-time Preview) I am unable to change the values of properties like I can when viewing any other website in said browsers.  For example, if I inspect a <div> with width: 100%; and click on "100%" to change the value it will not accept any arrow key input or typed value.  I can type in a new value but once I hit enter it reverts back to the original "100%".  I'm pretty sure I was able to change values in the past, prior to having to reinstall Dreamweaver yesterday due to a bug.  Btw, I just checked and this issue also applies when trying to change the name of an selector from within the element inspector panel.

Again, I can open other websites within the browsers, and changing values within the element inspector works as expected.  Not sure if this is a bug or something has change in the latest release of Dreamweaver CC 2017.  Is anyone else experience this issue or did and found a solution?

This is yet another issue I'm having with the latest release of Dreamweaver CC 2017 while running on iMac OSX 10.12.6 and latest version of Firefox (54.0.1) and Safari (10.1.2).

[Jon Fritz]

That's probably because your Live Preview is actually functioning correctly (mine doesn't, so what you describe doesn't happen for me).

Let me explain...

Live Preview is your page in DW pulled through Adobe's servers, and given to you "Live". Any change you make to the page in DW is supposed to be reflected in the browser instantly. If you change it in the dev tools of the browser, when the page refreshes from your current development page in DW, the change would disappear.

Using Live Preview, you "should" be able to make changes in DW and have them reflect instantly in the browser, without having to mess with the browser Dev Tools, which in turn "should" remove the need for the browser's Inspect function and dev tools all together.

If you don't want that workflow, use the Open In Browser option instead. If your pages are set as tabs in the Application Frame of DW, you can right click the named tab of a page to get to Open in Browser. You can also right click the file's name in the Files window to get to the same option. It works just like the old Preview in Browser.

[seahawksean80]

I had already tried opening up the file from Finder directly into the browser but I still couldn't change any of the values.  The strange thing is I can alter the selector names within the HTML of the element inspector.  For example, if I highlight a <div> with the class name "row", I can change the name in the HTML panel, but if I try to change .row in the CSS panel it will revert back to .row.  Not sure if I have to turn of Live View or something. 

Just tried you suggestion of right clicking on the DW tab and opening it in browser, but still no ability to change any of the CSS.

Thank for your reply.

[Jon Fritz]

I've never had anything similar happen in my browsers.

Live View (as in Live View, Design View, Code View and Split) in DW has nothing to do with the browsers at all, aside from it being a Chrome-based emulator.

Live Preview does, which is why I suggested using the old Preview in Browser (now called Open in Browser) instead.

I can't think of any other reason for the browsers to think of a DW-created .html file as anything different from all the other .html files on the internet, when it comes to the functions in the dev tools.

What happens when you close DW all together and open the file directly in the browser? I can't think of any way for DW to be controlling your browser's dev tools, but if it somehow were, killing the program entirely before opening the file directly in the browser would stop it from exerting that control. It should function normally because there would be no process in DW that could affect it.

[seahawksean80]

I'll give that a try Mon morning before opening DW and I'll let you know what happens. Thanks!

Sent from my iPhone

[Nancy OShea]

Are you using Bootstrap?  And which CSS file are you looking at in the Element Inspector?

If you have more than one CSS file declared in your document, the last once takes priority over the top one.   Embedded CSS takes priority over external CSS, and inline CSS takes priority over all others.

Nancy

[seahawksean80]

Nancy,

Thank you for your replies. I only have the styles in the head of the HTML file (now wonder if that's the reason). I'm not using any responsive frameworks. I'm just creating a "simple" Under Construction page with animation.

Sent from my iPhone

[Jon Fritz]

I did a little poking around online and it appears Chrome had a bug a while back that did exactly what you're seeing, I also see mention of the same type of thing happening when there's an error in your stylesheets. It's pretty unlikely Chrome has reintroduced an old bug, but it might be worth checking against the css validator and cleaning up any errors you have...

The W3C CSS Validation Service

[pziecina]

Just checked this in Chrome and Edge, (both latest versions) and with Chrome i cannot edit from Dw, but Edge has no problems with any edits.

Both are going via a testing server.

[Jon Fritz]

Weird, in my Chrome (version 60.0.3112.78) on Windows 7, I have no issue modifying css of any page in the Dev Tools, no matter how I preview it out of DW. I tested both sites with and without testing servers, Live Preview and Open in Browser. Chrome accepted the changes without complaint, and without reverting to the original settings.

[pziecina]

Computer restart, (win 10) now Chrome also works.

Weird, but as the OP is on a Mac even if i do find the problem it would probably be different. My first though though would be that the os is not setting permission correctly for either Dw or Chrome durring the start-up process.

[seahawksean80 · Accepted solution]

I opened my file in DW again and tried right clicking on the file tab and click Open in Browser, but that results in the same thing as clicking the "Real-time Preview" icon.  But with your help here, I think I figured out why I can't change properties/values in the element inspector.  I think it's because my styles are placed in the head of the html file since this is an "Under Maintenance" page for when our site goes down. 

I opened another one of my web projects with external stylesheets.  I real-time previewed that and as expected I WAS able to alter the properties/values.  So, it seems that Real-time Preview doesn't like internal styles.

This must be a new bug because I am 99.999% that I've opened other projects with internal styles and had no problem altering it in an element inspector.

Of course, discovering this won't improve my workflow, but at least I now know why things weren't working as expected.  I'll just remember to keep stylesheets external while working thru the project, and then once I'm done I'll move them internally if the project calls for it.

Thank you all for helping me work through this.

[Preran]

If you are sure this is a bug, I suggest reporting it to the team using Adobe Dreamweaver CC: Feature Ideas providing all info required for the team to investigate your issue.

Thanks,

Preran

[Nancy OShea]

That's correct. If you look at the source code in  Real-Time Preview, it's an <iframe> of your site.   So Inspect Element or Firefox's Edit CSS feature has no effect.

To use browser editing, use Open in Browser.  Don't use F12.  See screenshot.

Nancy