You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@cordova.apache.org by "Pamela Fox (Created) (JIRA)" <ji...@apache.org> on 2012/04/19 04:38:39 UTC

[jira] [Created] (CB-540) Feature Request: ability to easily navigate to particular place in DOM via bookmarks/jump to selector

Feature Request: ability to easily navigate to particular place in DOM via bookmarks/jump to selector
-----------------------------------------------------------------------------------------------------

                 Key: CB-540
                 URL: https://issues.apache.org/jira/browse/CB-540
             Project: Apache Callback
          Issue Type: Bug
          Components: weinre
            Reporter: Pamela Fox
            Assignee: Patrick Mueller


I often use weinre to debug a particular element in the DOM and CSS changes to that element, which means that I'm constantly making new changes and re-navigating to that element in the DOM (since the Elements console loses its place between reloads). It'd be nice if I could either jump to an element by CSS selector or bookmark it somehow, for quicker debugging.



--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (CB-540) Feature Request: ability to easily navigate to particular place in DOM via bookmarks/jump to selector

Posted by "Patrick Mueller (Commented) (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/CB-540?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13257253#comment-13257253 ] 

Patrick Mueller commented on CB-540:
------------------------------------

Pamela, thx for the bug report.

There are two ways I know of that real Web Inspector does this.

First is the little magnifying glass icon at the bottom of the Elements panel.  When you click it, it puts the mouse in a capture mode in the target browser, such that when you click on something in the target window, it "selects" that element in the element browser and expands the element tree to make it visible.

Second is the console command {{inspect(element)}}.  Not entirely clear to me what you are supposed to pass to {{inspect()}}.  Maybe a jQuery-esque selector or something.  One thing I got to work is to run the following from the console (in real web inspector): {{inspect($("credits"))}}.  Note this uses Web Inspector's cheap-o {{$}} function (which sadly masks jQuery, if you're using it) to expand a node with an id of "credits".

The first method - 'mouse capture' - may be difficult to do, in general, for mobile, though might end up working out good enough for touch devices.  I'll prolly see if I can implement it, and if it just doesn't work in some environments, the solution is: DON'T PRESS THE MAGNIFYING GLASS BUTTON ICON.

I'll try to figure out what the argument to inspect() is supposed to be; apparently you can pass it a DOM node you captured in a variable or expression anyway.

Will either of those work for you?

I also noticed that real Web Inspector will "remember" the node you currently have "selected" in the Elements panel when you reload, and expand out to it when the elements are reloaded.  That would be a nice thing to support as well.

Other thoughts?
                
> Feature Request: ability to easily navigate to particular place in DOM via bookmarks/jump to selector
> -----------------------------------------------------------------------------------------------------
>
>                 Key: CB-540
>                 URL: https://issues.apache.org/jira/browse/CB-540
>             Project: Apache Callback
>          Issue Type: Bug
>          Components: weinre
>            Reporter: Pamela Fox
>            Assignee: Patrick Mueller
>
> I often use weinre to debug a particular element in the DOM and CSS changes to that element, which means that I'm constantly making new changes and re-navigating to that element in the DOM (since the Elements console loses its place between reloads). It'd be nice if I could either jump to an element by CSS selector or bookmark it somehow, for quicker debugging.

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (CB-540) [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector

Posted by "Patrick Mueller (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/CB-540?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13261584#comment-13261584 ] 

Patrick Mueller commented on CB-540:
------------------------------------

the "npm install weinre" version now contains these patches
                
> [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector
> ---------------------------------------------------------------------------------------------
>
>                 Key: CB-540
>                 URL: https://issues.apache.org/jira/browse/CB-540
>             Project: Apache Callback
>          Issue Type: Bug
>          Components: weinre
>            Reporter: Pamela Fox
>            Assignee: Patrick Mueller
>
> I often use weinre to debug a particular element in the DOM and CSS changes to that element, which means that I'm constantly making new changes and re-navigating to that element in the DOM (since the Elements console loses its place between reloads). It'd be nice if I could either jump to an element by CSS selector or bookmark it somehow, for quicker debugging.

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Updated] (CB-540) [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector

Posted by "Patrick Mueller (Updated) (JIRA)" <ji...@apache.org>.
     [ https://issues.apache.org/jira/browse/CB-540?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Patrick Mueller updated CB-540:
-------------------------------

    Summary: [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector  (was: Feature Request: ability to easily navigate to particular place in DOM via bookmarks/jump to selector)
    
> [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector
> ---------------------------------------------------------------------------------------------
>
>                 Key: CB-540
>                 URL: https://issues.apache.org/jira/browse/CB-540
>             Project: Apache Callback
>          Issue Type: Bug
>          Components: weinre
>            Reporter: Pamela Fox
>            Assignee: Patrick Mueller
>
> I often use weinre to debug a particular element in the DOM and CSS changes to that element, which means that I'm constantly making new changes and re-navigating to that element in the DOM (since the Elements console loses its place between reloads). It'd be nice if I could either jump to an element by CSS selector or bookmark it somehow, for quicker debugging.

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (CB-540) [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector

Posted by "Patrick Mueller (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/CB-540?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13261039#comment-13261039 ] 

Patrick Mueller commented on CB-540:
------------------------------------

I've added two Web Inspector capabilities to weinre, hopefully these will help.

1) When you reload a page with the weinre client still running, instead of getting the collapsed <html> element, you should get what you got the first time - nodes expanded thru <body>.  In addition, if you've selected an element in the element pane (click on it), the last selected item before you reloaded should also be expanded out.  

2) When you call the {{inspect(thang)}} function, from the console, where {{thang}} is a DOM element, that DOM element should be expanded out in the element pane.  Note, I believe you can only call this from the console, not in your code.  Seems like it would be nice to have this available as a function on {{console}} as well.


I think 1) will work out well, since you don't have to do anything special - kinda does what you'd hope it'd do.  The second may work out well if you have easy access to your elements.  Keep in mind you can use the ["command line API" functions|http://getfirebug.com/wiki/index.php/Command_Line_API] like {{$()}} and {{$$()}} with {{inspect()}}.

You can try this out in a build I just did, located here:

    http://people.apache.org/~pmuellr/weinre/builds/2.0.0-pre-H1FFX7OT-incubating/

You can npm install via:

{noformat}
sudo npm -g install http://people.apache.org/~pmuellr/weinre/builds/2.0.0-pre-H1FFX7OT-incubating/apache-cordova-weinre-2.0.0-pre-H1FFX7OT-incubating-bin.tar.gz
{noformat}

Let me know how these work out.  If the {{console.inspect()}} function sounds interesting, so you could (temporarily) add it to your code, let me know and I'll open a bug against Big Web Inspector (and add it to weinre straight away).

I'm open for other ideas.  I like the idea of "bookmarking" elements, kinda like *Watch Expressions* from the Scripts Pane, but for the Elements Pane.  I'd rather inherit that code from Web Inspector than write it from scratch tho :-)
                
> [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector
> ---------------------------------------------------------------------------------------------
>
>                 Key: CB-540
>                 URL: https://issues.apache.org/jira/browse/CB-540
>             Project: Apache Callback
>          Issue Type: Bug
>          Components: weinre
>            Reporter: Pamela Fox
>            Assignee: Patrick Mueller
>
> I often use weinre to debug a particular element in the DOM and CSS changes to that element, which means that I'm constantly making new changes and re-navigating to that element in the DOM (since the Elements console loses its place between reloads). It'd be nice if I could either jump to an element by CSS selector or bookmark it somehow, for quicker debugging.

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Resolved] (CB-540) [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector

Posted by "Patrick Mueller (JIRA)" <ji...@apache.org>.
     [ https://issues.apache.org/jira/browse/CB-540?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Patrick Mueller resolved CB-540.
--------------------------------

    Resolution: Fixed
    
> [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector
> ---------------------------------------------------------------------------------------------
>
>                 Key: CB-540
>                 URL: https://issues.apache.org/jira/browse/CB-540
>             Project: Apache Callback
>          Issue Type: Bug
>          Components: weinre
>            Reporter: Pamela Fox
>            Assignee: Patrick Mueller
>
> I often use weinre to debug a particular element in the DOM and CSS changes to that element, which means that I'm constantly making new changes and re-navigating to that element in the DOM (since the Elements console loses its place between reloads). It'd be nice if I could either jump to an element by CSS selector or bookmark it somehow, for quicker debugging.

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        

[jira] [Commented] (CB-540) [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector

Posted by "Patrick Mueller (JIRA)" <ji...@apache.org>.
    [ https://issues.apache.org/jira/browse/CB-540?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13261580#comment-13261580 ] 

Patrick Mueller commented on CB-540:
------------------------------------

committed to master:

    https://git-wip-us.apache.org/repos/asf?p=incubator-cordova-weinre.git;a=commit;h=1356753525115913bb755b6695cfe370e8f223a6
                
> [weinre] ability to easily navigate to particular place in DOM via bookmarks/jump to selector
> ---------------------------------------------------------------------------------------------
>
>                 Key: CB-540
>                 URL: https://issues.apache.org/jira/browse/CB-540
>             Project: Apache Callback
>          Issue Type: Bug
>          Components: weinre
>            Reporter: Pamela Fox
>            Assignee: Patrick Mueller
>
> I often use weinre to debug a particular element in the DOM and CSS changes to that element, which means that I'm constantly making new changes and re-navigating to that element in the DOM (since the Elements console loses its place between reloads). It'd be nice if I could either jump to an element by CSS selector or bookmark it somehow, for quicker debugging.

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira