You can use `$x` in the Chrome javascript console. No extensions needed.

ex: `$x(&quot;//img&quot;)`

Just typing xpath expression in the search box should work. It works for me in tip-of-tree build.

The feature seems to be broken in Chrome 11 though, I&#39;ve filed a bug on this: http://crbug.com/79716

For xpath searches use `$x(&#39;xpathSelector&#39;)`.
For a css selector use `$(&#39;cssSelector&#39;)`.

However, this last selector returns only the first matching element. If you want to see all matching elements go for `$$(&#39;cssSelector&#39;)`


If you click on any element in the elements pane then type command-F, it will open a search bar that lets you search for elements using xpath selectors.

Is there any way to create a variable in a module in Ruby that would behave similar to a class variable? What I mean by this is that it would be able to be accessed without initializing an instance of the module, but it can be changed (unlike constants in modules).

Create module variables in Ruby

How can I detect support for WebP via Javascript? I&#39;d like to use feature detection rather than browser detection if possible, but I can&#39;t find a way to do so. Modernizr ([www.modernizr.com][1]) doesn&#39;t check for it.


  [1]: http://www.modernizr.com

Detecting WebP support

The doc http://code.google.com/chrome/devtools/docs/elements.html says it supports XPath or CSS selectors, but when I tried, didn&#39;t seem to work for me. 

Any one knows how to use it?

How to search DOM elements using XPath or CSS selectors in Chrome Developer Tools?

<p>The doc <a href="http://code.google.com/chrome/devtools/docs/elements.html" target="_blank" rel="noopener noreferrer">http://code.google.com/chrome/devtools/docs/elements.html</a> says it supports XPath or CSS selectors, but when I tried, didn't seem to work for me.</p>
<p>Any one knows how to use it?</p>


I’m using AJAX to append data to a `&lt;div&gt;` element, where I fill the `&lt;div&gt;` from JavaScript. How can I append new data to the `&lt;div&gt;` without losing the previous data found in it?

How to append text to a `&lt;div&gt;`?

in a div, have elements (not necessarily 2nd generation) with attribute &lt;code&gt;move_id&lt;/code&gt;.

First, would like most direct way of fetching first and last elements of set

tried getting first and last via:

    var first = div.querySelector(&#39;[move_id]:first&#39;);
    var last  = div.querySelector(&#39;[move_id]:last&#39;);

this bombs because :first and :last were wishful thinking on my part (?)

cannot use the Array methods of &lt;code&gt;querySelectorAll&lt;/code&gt; since &lt;code&gt;NodeList&lt;/code&gt; is not an Array:

    var first = (div.querySelectorAll(&#39;[move_id]&#39;))[0];
    var last  = (div.querySelectorAll(&#39;[move_id&#39;])).pop();

this bombs because &lt;code&gt;NodeList&lt;/code&gt; does not have method &lt;code&gt;pop()&lt;/code&gt;

(yes, one could could use Array methods on top of the NodeList:

    var first = div.querySelector(&#39;[move_id]&#39;);
    var last = Array.prototype.pop.call(div.querySelectorAll(&#39;[move_id&#39;]));

this works, and is what I&#39;m using now, but thinking there has to be something more direct that I&#39;m simply missing)


Second, need to verify that the elements are listed by pre-oder depth-first traversal as per &lt;http://en.wikipedia.org/wiki/Tree_traversal&gt;


in querySelector: how to get the first and get the last elements? what traversal order is used in the dom?

Is it possible to check if an input element of an html5 form is valid based on the pattern I set for it? I know the psuedo class stuff.. but i&#39;m hoping something like:
`document.getElementById(&#39;petitionName&#39;).valid`
can return `true` or `false`.. 

I really hope I don&#39;t need to create javascript to re-verify this stuff.

a way to check validity of HTML5 forms?

So [jQuery 1.6](http://api.jquery.com/category/version/1.6/) has the new function [`prop()`](http://api.jquery.com/prop/).

    $(selector).click(function(){
        //instead of:
        this.getAttribute(&#39;style&#39;);
        //do i use:
        $(this).prop(&#39;style&#39;);
        //or:
        $(this).attr(&#39;style&#39;);
    })

or in this case do they do the same thing?

And if I *do* have to switch to using `prop()`, all the old `attr()` calls will break if i switch to 1.6?

**UPDATE**

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    selector = &#39;#id&#39;

    $(selector).click(function() {
        //instead of:
        var getAtt = this.getAttribute(&#39;style&#39;);
        //do i use:
        var thisProp = $(this).prop(&#39;style&#39;);
        //or:
        var thisAttr = $(this).attr(&#39;style&#39;);

        console.log(getAtt, thisProp, thisAttr);
    });

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;div id=&#39;id&#39; style=&quot;color: red;background: orange;&quot;&gt;test&lt;/div&gt;

&lt;!-- end snippet --&gt;

(see also this fiddle: http://jsfiddle.net/maniator/JpUF2/)

The console logs the `getAttribute` as a string, and the `attr` as a string, but the `prop` as a `CSSStyleDeclaration`, Why? And how does that affect my coding in the future?

.prop() vs .attr()

How can I append a childNode to a specific position in javascript?

I want to add a childNode to the 3rd position in a div. There are other nodes behind it that need to move backwards (3 becomes 4 etc.)



How to append a childnode to a specific position

I am modifying a site&#39;s appearance (CSS modifications) but can&#39;t see the result on Chrome because of annoying persistent cache. I tried &lt;kbd&gt;Shift&lt;/kbd&gt;+refresh but it doesn&#39;t work.

How can I disable the cache temporarily or refresh the page in some way that I could see the changes?

Disabling Chrome cache for website development

Receiving the subject error when Chrome tries to load the script file on the page. It says it&#39;s at the last line of the javascript file. I can&#39;t seem to find anything wrong with it. No errors in firefox, and the script works as expected. Just using form validation

    // JavaScript Document
    $(function() {
      $(&#39;#wm-form&#39;).submit(function() {
        var errors = false;
        var errorMsg = &quot;&quot;;
        $(&#39;.required&#39;).each(function() {
          if(!validField($(this))) {
            errorMsg += $(this).attr(&#39;name&#39;).capitalize() + &quot; cannot be blank\n&quot;;
            errors = true;
          }
        });
        var emailAddress = $(&#39;#email&#39;);
        if(isValid(emailAddress) &amp;&amp; !(/^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$/.test(emailAddress.val()))) {
          errorMsg += &quot;Not a valid email address. Please enter in a correctly formatted email address&quot;;
          errors = true;
        }
        if(errors) {
          alert(errorMsg);
          return false;
        }
      });

      $(&#39;.form-focus&#39;).click(function() {
        $(document).scrollTop(0);
        $(&#39;#first_name&#39;).focus();
        return false;
      });
    });

    function validField(element) {
      if(!isValid(element.val()) || (element.attr(&#39;placeholder&#39;) &amp;&amp; element.attr(&#39;placeholder&#39;) == element.val()) || 
        (element.attr(&#39;type&#39;) == &#39;radio&#39; &amp;&amp; !checkedRadio(element))) {
        return false;
      }
      else {
        return true;
      }
    }

    function isValid(ele) {
      if(ele == null || ele == &#39;&#39;) {
        return false;
      }
      else {
        return true;
      }
    }

    String.prototype.capitalize = function() {
        return this.charAt(0).toUpperCase() + this.slice(1);
    };

    function checkedRadio (element) {
      var valid = false;
      $(&#39;input[name=&quot;&#39;+ element.attr(&quot;name&quot;) +&#39;&quot;]:checked&#39;).each(function() {
        valid = true;
      });
  
      return valid;
    }​

Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL

In [this example][1] the image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE.

    &lt;img src=&quot;/img/logo.png&quot; style=&quot;margin:0px auto;&quot;/&gt;


  [1]: http://jsfiddle.net/XnKDQ/

Auto margins don&#39;t center image in page

Is there a way, or an extension, that lets me watch the &quot;traffic&quot; going through a WebSocket? For debugging purposes I&#39;d like to see the client and server requests/responses.

Debugging WebSocket in Google Chrome

Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other ways to accomplish this in the inspector?

How to use chrome web inspector to view hover code

I have a chrome extension which hooks into the devtools.  Ideally I want a badge that, when clicked, opens up the devtools on the new tab which I created.  Is there any way to do this from the background page?

Can I programmatically open the devtools from a Google Chrome extension?

How to save CSS changes of [Styles panel][1] of [Google Chrome Developer Tools][2]?

At tool&#39;s website it&#39;s mentioned that [we can see all change in resource panel][3] 

![enter image description here][4]

But I&#39;m working locally on a CSS file but changes are not showing in Resource panel for me

![enter image description here][5]

![enter image description here][6]

**By the way Do you know any add-ons , tools to save css changes of Chrome Developer tools?**
 I know for Firebug there are many https://stackoverflow.com/search?q=firebug+CSS+changes+save


  [1]: http://code.google.com/chrome/devtools/docs/elements-styles.html#styles_edit
  [2]: http://code.google.com/chrome/devtools/docs/overview.html
  [3]: http://code.google.com/chrome/devtools/docs/elements-styles.html#persist
  [4]: http://i.stack.imgur.com/qi3lY.png
  [5]: http://i.stack.imgur.com/EmG8e.jpg
  [6]: http://i.stack.imgur.com/MxS2o.jpg

How to save CSS changes of Styles panel of Chrome Developer Tools?

I really like the ability to edit javascript in the chrome debugger however, I find that it can be really problematic getting the debugger to re-fetch the JavaScript from the server.

Sometimes I have to go as far just closing the debugger and reloading the frame works OK - but other times (an dI cannot pin down under what conditions this occurs) I have to clear my temporary internet cache.  Sometimes I swear I have to close chrome completely, then clear the cache and then load the page before the debugger finally shows me the most up-to-date script.

(NB.  There is no caching of the script by the web server)

I was wondering if anyone knew of a quick and easy way to tell the debugger to invalidate all its javascript and fetch it all anew on page reload?

Content Type	Original Author	Original Content on Stackoverflow
Question	Bobo	View Question on Stackoverflow
Solution 1 - Dom	Matt Polito	View Answer on Stackoverflow
Solution 2 - Dom	Yury Semikhatsky	View Answer on Stackoverflow
Solution 3 - Dom	cham	View Answer on Stackoverflow
Solution 4 - Dom	spacether	View Answer on Stackoverflow

How to search DOM elements using XPath or CSS selectors in Chrome Developer Tools?

Dom Problem Overview

Dom Solutions

Solution 1 - Dom

Solution 2 - Dom

Solution 3 - Dom

Solution 4 - Dom

Detecting WebP support

Create module variables in Ruby

Attributions