15 Replies Latest reply: Jan 13, 2013 1:52 PM by marco.linos RSS

    Live View and Inspect BROKEN in DW CS5 & Drupal

    zoon_unit Community Member

      I successfully navigated through the confusing instructions for setting up a local Drupal website in Dreamweaver's site manager and was very excited the first time I did a "discover" and DW found all the Drupal files on my local testing server.  Yay!

       

      I was even more excited when I tried live view and was able to click on elements in my Drupal page and see the CSS properties displayed.  (similar to how Firebug in Firefox works)

       

      Unfortunately, my excitement didn't last.  The property inspector in DW CS5 is BROKEN.  When you click on a specific element on the page, the "live code" displayed for that selection is wrong.  DW tends to select far more code than the actual element chosen.  As a result, the CSS properties displayed in the CSS panels are wrong for that particular element.  Most of the time, they are the properties for the element (<div>) that WRAPS the selected element.

       

      This makes the wonderful, Live View Inspect TOTALLY USELESS, for Drupal development.  Didn't Adobe actually TEST this app with Drupal before distributing it?  I just spent $600 on an upgrade to CS5 for NOTHING!

        • 1. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
          Randy Edmunds Employee Hosts

           

          I was even more excited when I tried live view and was able to click on elements in my Drupal page and see the CSS properties displayed.  (similar to how Firebug in Firefox works)

           

          Unfortunately, my excitement didn't last.  The property inspector in DW CS5 is BROKEN.  When you click on a specific element on the page, the "live code" displayed for that selection is wrong.  DW tends to select far more code than the actual element chosen.  As a result, the CSS properties displayed in the CSS panels are wrong for that particular element.  Most of the time, they are the properties for the element (<div>) that WRAPS the selected element.

           

          Please read my post about a few of the fine points of using the Live View Inspect Mode:

          http://blogs.adobe.com/dreamweaver/2010/06/tip_for_using_live_view_inspec.html

           

          Let us know if you are still having problems.

           

          Regards,

          Randy

          • 2. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
            zoon_unit Community Member

            Randy,

             

            Unfortunately, this behavior isn't the root of the problem, as I am aware of

            the right and left arrow keyboard functions.  When I use the left arrow to

            navigate up the hierarchy, Dreamweaver will skip several  with one

            keystroke. In actual fact, Dreamweaver IS BROKEN, since the CSS properties

            listed in the CSS pane don't even apply to the current selection.  (at least

            for Drupal sites)  There is a definite bug here.

             

            In fact, I have been conversing with Silas Norbu Lepcha in Adobe support

            about this issue.  I even sent him a couple of screen grabs that highlight

            the problem in no uncertain terms.  I'd be happy to send you copies as well,

            but want to get your approval before attaching images to an email.

             

            Ironically, Firebug selects elements properly, which is a big embarrassment

            for Adobe. 

             

            Kent Lester

            • 3. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
              Randy Edmunds Employee Hosts

              Kent,

               

              Unfortunately, this behavior isn't the root of the problem, as I am aware of

              the right and left arrow keyboard functions.  When I use the left arrow to

              navigate up the hierarchy, Dreamweaver will skip several  with one

              keystroke. In actual fact, Dreamweaver IS BROKEN, since the CSS properties

              listed in the CSS pane don't even apply to the current selection.  (at least

              for Drupal sites)  There is a definite bug here.

               

              In fact, I have been conversing with Silas Norbu Lepcha in Adobe support

              about this issue.  I even sent him a couple of screen grabs that highlight

              the problem in no uncertain terms.  I'd be happy to send you copies as well,

              but want to get your approval before attaching images to an email.

               

              Both Silas and I work on the DW Team as Engineers, not Tech Support. We are just trying to learn about bugs in DW and help out our customers.

               

              While screen shots verify that there is a problem, they are usually not much help determining this type of problem. What I need is a link to one of your pages. Thanks to the new Live Navigation feature in DW CS5, I can usually use your page directly on the web for debugging with no need to download it.

               

              Regards,

              Randy

              • 4. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                zoon_unit Community Member

                Randy,

                 

                My site is still in development, so it's not available on the www.  I hope you guys can fix this issue, because when it works properly, it will be great!

                 

                Here are the screen grabs, which are better than nothing, I suppose.  If you would like to contact me directly, I would be more than happy to supply Adobe with the actual Drupal code so that you can reproduce the problem exactly.

                 

                 

                DW_Drupal_commented2.jpg

                 

                 

                 

                FB_Drupal_commented.jpg

                • 5. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                  zoon_unit Community Member

                  uggh, I guess the forum has a max resolution limit.  The original images were much higher in resolution.

                   

                  Here are direct links to the images:

                   

                  http://i93.photobucket.com/albums/l56/zoon_unit/DW_Drupal_commented2.jpg

                   

                  http://i93.photobucket.com/albums/l56/zoon_unit/FB_Drupal_commented.jpg

                   

                  Message was edited by: zoon_unit

                  • 6. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                    Randy Edmunds Employee Hosts
                    Here are direct links to the images:

                     

                    http://i93.photobucket.com/albums/l56/zoon_unit/DW_Drupal_commented2.jpg

                    http://i93.photobucket.com/albums/l56/zoon_unit/FB_Drupal_commented.jpg

                     

                    It looks like the Code View selection and the Live View selections are a little out-of-sync. I am not sure what type of element would cause that.

                     

                    The workaround is to select the desired tag in either the Tag Selector or Code View. You won't get the visual box model highlighting in Live View, but everything else should work.

                     

                    Please try to boil the problem down as much as you can, then send the source files to Silas, and remind him to forward them to me. Sample pages that are plain HTML (no need for a Drupal server) would be awesome.

                     

                    Thanks,

                    Randy

                    • 7. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                      zoon_unit Community Member

                      Not sure how I could translate the problem into a plain html file, since all the elements of Drupal are served up from a database and php server.  Even if I could, I suspect it wouldn't reproduce the problem, since I have no issue with the Inspect button on static html files.  One thing to note is that the box model on the selected element seems to accurately reflect the proper CSS settings, even though live code and CSS panels do not.  So the out-of-sync issue seems to be between the box model and the live code and CSS panels.

                       

                      It would be worth your while to set up a live Drupal site.  Admittedly, there are a ton of different things going on within a Drupal page, including javascript, which I suppose could throw things out of sync.  (although turning off javascript didn't fix the problem)  Since Drupal is all open source, it would be easy for me to send a zipped codefile and mysql dump to your developers.  Or you could recreate a site from Drupal.org.  I have tested this against several iterations of Drupal with several different themes, some simple and some complex, and the problem is pretty consistent, although it behaves slightly differently depending on the Drupal theme being used.

                       

                      On some themes, Inspect picks LESS than the proper amount of code. On some themes, it picks MORE.  My theory is that it's some kind of mathematical or array issue with DW, because Firebug can reliably render all my Drupal sites with no issues at all.

                       

                      Using the Tag Selector is difficult in most cases, because the Inspect selector tends to select an "outer" div instead of the one that is correct, so the correct selection is not shown on the tag selector list.  (since the tag selector only shows outer divs to the currently selected one.)  The convoluted workaround is to select an element INSIDE of the targeted element, and then backtrack up the Tag Selector tree.  Selecting the proper code with the Tag Selector DOES appear to render the proper CSS and Live Code, but you obviously lose one of the biggest advantages of live view, which is to quickly find the proper element and see the visual box model rendered live.

                       

                      This one issue will severely limit the attractiveness of DW to Drupal developers.  But if you can get it working, I will be singing Dreamweaver's praises all over Drupal.org!

                       

                      UPDATE: One other clue I just discovered while using several other Drupal themes: When selecting an element, live code appears to miss the first div and instead pick the following div.  Example: (note, I'm using parentheses instead of brackets since this forum strips brackets)

                       

                      (div id=first_div)some kind of text

                      (/div)

                      (div class=second_div)more text(/div)

                       

                      The live code selection is in bold italic.  Live code starts selecting AFTER the first div marker and grabs the start of the next div.

                       

                      Sure seems like a mis-applied array element to me. 

                      • 8. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                        goodonline

                        I am having the same issue in a non drupal situation.

                        While in Live View, I highlight the text or element and the code window displays a different portion of the page.

                        While NOT in Live View, It selects the correct items. Specifically the h2 tags on the lower portion of the page.

                         

                         

                        The site is live if you want to verify:

                        http://www.indianspringsmontana.com/quality_of_life.php

                         

                        I hope this will help,

                         

                        Thanks,

                         

                        Robert Good.

                        • 9. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                          Paevo Kelley Community Member

                          This was the one improvement I

                          felt justified "upgrading" to CS5. Looks like I'll be waiting for CS6 (and it's concomitant

                          bug complaints)...

                           

                          • 10. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                            zoon_unit Community Member

                            Randy,

                             

                            I'm curious if you've discussed this issue with Silas Lepcha.  I sent him a url to a live site and code demonstrating this bug a week ago, but I have not heard anything back from him.

                            • 11. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                              Randy Edmunds Employee Hosts

                              I'm curious if you've discussed this issue with Silas Lepcha.  I sent him a url to a live site and code demonstrating this bug a week ago, but I have not heard anything back from him.

                               

                              Thank you for the test page. The id/pw did not seem to work, but I was able to reproduce the problem without it. I don't know what the problem is yet, and I don't have any work arounds for you. Please leave that test page posted while we analyze the problem.

                               

                              Thanks,

                               

                              Randy Edmunds

                              Dreamweaver Development

                              Adobe Systems, Inc.

                              • 12. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                                Randy Edmunds Employee Hosts

                                I am having the same issue in a non drupal situation.

                                While in Live View, I highlight the text or element and the code window displays a different portion of the page.

                                While NOT in Live View, It selects the correct items. Specifically the h2 tags on the lower portion of the page.

                                 

                                 

                                The site is live if you want to verify:

                                http://www.indianspringsmontana.com/quality_of_life.php

                                 

                                Thank you for the addional test page. My suspicion is that the content generated by the client-side script is causing the problem, but that's just a guess.

                                 

                                Thanks,

                                 

                                Randy Edmunds

                                Dreamweaver Development

                                Adobe Systems, Inc.

                                • 13. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                                  zoon_unit Community Member

                                  Randy,

                                   

                                  The password I passed on was for SSH access to the files, in case you wanted to copy or manipulate them.  If you need a login and password into Drupal, let me know.

                                  • 14. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                                    mjbirdge

                                    Has there been any further updates or resolutions to this issue?

                                     

                                    I believe I am experiencing the same problem; using DW CS5 & Drupal (7.x).

                                     

                                    When I turn on Liveview & Inspect mode, the livecode shown doesn't match the content highlighted with the inspect tool.

                                    I'm selecting a simple <h2> tag in liveview, but livecode and the CSS inspector are selecting elements on a completely different portion of the page.

                                     

                                    I've tried disabling javascript, etc. to see if I can figure out how to resolve this issue, but as far as I can tell, Liveview & livecode are not working together in Inspect mode as they should.

                                    • 15. Re: Live View and Inspect BROKEN in DW CS5 & Drupal
                                      marco.linos

                                      Hello all,

                                       

                                      I recently installed DW06 and unfortunately I do experience the same problems as discribes above by mjbirdge and the other of this poll.

                                       

                                      I work with DS06 and drupal 6 on a local testing server.

                                      Firbug does indentify the tags correclty

                                       

                                      Since this issue has a pretty long history, I assume that the adobe-developer has been working on this annoying issued and fixed it.

                                       

                                      I appreciate feedback from the adobe-team as well from this community in order to understand how to proceed.

                                       

                                      Thanks in advance.