Skip to main content
S
seahawksean80
Inspiring
July 28, 2017
Answered

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

  • July 28, 2017
  • 2 replies
  • 4427 views

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).

This topic has been closed for replies.
Correct answer seahawksean80

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


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.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 28, 2017

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

Nancy O'Shea— Product User & Community Expert
Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
July 28, 2017

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.

S
seahawksean80Author
Inspiring
July 28, 2017

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
Community Expert
Jon FritzCommunity Expert
Community Expert
July 28, 2017

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices