What you are looking for are &#39;[Event Listener Breakpoints][1]&#39; on the `Sources` tab. These breakpoints are triggered whenever any event listener, that listens for chosen event, is fired. You will find them in the Sources tab. In your case, expand &#39;Mouse&#39; category and choose &#39;Click&#39;.

![DevTools Event Listener Breakpoints][2]


  [1]: https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#event-listeners
  [2]: http://i.stack.imgur.com/JEz07.png

In Spring CrudRepository, do we have support for &quot;IN clause&quot; for a field? ie something similar to the following? 


     findByInventoryIds(List&lt;Long&gt; inventoryIdList) 


If such support is not available, what elegant options can be considered? Firing queries for each id may not be optimal.

Spring CrudRepository findByInventoryIds(List&lt;Long&gt; inventoryIdList) - equivalent to IN clause

I&#39;m interested in building a small app for personal use that will encrypt and decrypt information on the client side using JavaScript.  The encrypted information will be stored in a database on a server, but never the decrypted version.

It doesn&#39;t have to be super duper secure, but I would like to use a currently unbroken algorithm.

Ideally I&#39;d be able to do something like

    var gibberish = encrypt(string, salt, key);

to generate the encoded string, and something like

    var sensical = decrypt(gibberish, key);

to decode it later.

So far I&#39;ve seen this:
http://bitwiseshiftleft.github.io/sjcl/

Any other libraries I should look at?

JavaScript string encryption and decryption?

We have a button. Click events are handled by a 3rd party framework, however, the framework is buggy somehow.

We want to debug the framework, however, we don&#39;t know where the corresponding event handler code resides to set a breakpoint. How to generally &quot;break on next click event&quot; and see where and how this click is handled by the 3rd party framework?

Chrome debugging - break on next click event

<p>We have a button. Click events are handled by a 3rd party framework, however, the framework is buggy somehow.</p>
<p>We want to debug the framework, however, we don't know where the corresponding event handler code resides to set a breakpoint. How to generally "break on next click event" and see where and how this click is handled by the 3rd party framework?</p>


I&#39;ve been working in a web application and I&#39;m using local storage. But for some Firefox users I notice that they&#39;re having the following error:

&gt; NS_ERROR_FILE_CORRUPTED: Component returned failure code: 0x8052000b
&gt; (NS_ERROR_FILE_CORRUPTED) [nsIDOMStorage.setItem]

when it called the function:

    function setLocalStorageItem(key, value){ 
            localStorage.setItem(key, JSON.stringify(value));
    }

It&#39;s is a way to avoid this error?



Error in local storage - NS_ERROR_FILE_CORRUPTED - firefox

I&#39;m looking for a way to convert this jQuery code (which is used in responsive menu section) to pure JavaScript.

If it&#39;s hard to implement it&#39;s OK to use other JavaScript frameworks. 


	$(&#39;.btn-navbar&#39;).click(function()
	{
		$(&#39;.container-fluid:first&#39;).toggleClass(&#39;menu-hidden&#39;);
		$(&#39;#menu&#39;).toggleClass(&#39;hidden-phone&#39;);
		
		if (typeof masonryGallery != &#39;undefined&#39;) 
			masonryGallery();
	});

How do I toggle an element&#39;s class in pure JavaScript?

I was trying to find the fastest way of running a for loop with its own scope. The three methods I compared were:

    var a = &quot;t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t,t&quot;.split();

    // lodash .each -&gt; 1,294,971 ops/sec
    lodash.each(a, function(item) { cb(item); });

    // native .forEach -&gt; 398,167 ops/sec
    a.forEach(function(item) { cb(item); });

    // native for -&gt; 1,140,382 ops/sec
    var lambda = function(item) { cb(item); };
    for (var ix = 0, len = a.length; ix &lt; len; ix++) {
      lambda(a[ix]);
    }

This is on Chrome 29 on OS X. You can run the tests yourself here:

http://jsben.ch/BQhED

How is lodash&#39;s `.each` almost twice as fast as native `.forEach`? And moreover, how is it faster than the plain `for`? Sorcery? Black magic?

Why is lodash.each faster than native forEach?

I&#39;m currently using the function below and it doesn&#39;t work properly. According to Google Maps, the distance between [these coordinates][2] (from `59.3293371,13.4877472` to `59.3225525,13.4619422`) are `2.2` kilometres while the function returns `1.6` kilometres. How can I make this function return the correct distance?

    function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
      var R = 6371; // Radius of the earth in km
      var dLat = deg2rad(lat2-lat1);  // deg2rad below
      var dLon = deg2rad(lon2-lon1); 
      var a = 
        Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
        Math.sin(dLon/2) * Math.sin(dLon/2)
        ; 
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
      var d = R * c; // Distance in km
      return d;
    }
    
    function deg2rad(deg) {
      return deg * (Math.PI/180)
    }

jsFiddle: http://jsfiddle.net/edgren/gAHJB/


  [1]: http://stackoverflow.com/a/27943/718990
  [2]: https://www.google.com/maps/preview#!data=!4m14!3m13!1m1!1s59.3293371%2C13.4877472!1m1!1s59.3225525%2C13.4619422!3m8!1m3!1d31685072!2d-95.677068!3d37.0625!3m2!1i1280!2i933!4f13.1&amp;fid=0

Function to calculate distance between two coordinates

In the MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

The `for...of` construct is described to be able to iterate over &quot;iterable&quot; objects. But is there a good way of deciding whether an object is iterable?

I&#39;ve tried to find common properties for arrays, iterators and generators, but have been unable to do so.

Aside from doing a `for ... of` in a try block and checking for type errors, is there a clean way of doing this?



Checking whether something is iterable

What exactly is a thread exit code in the Output window while debugging? What information it gives me? Is it somehow useful or just an internal stuff which should not bother me?

&lt;!-- language: lang-none --&gt;

    The thread 0x552c has exited with code 259 (0x103).
    The thread 0x4440 has exited with code 0 (0x0).

Is there maybe some sort of list of possible exit codes along with its significance?

What is a thread exit code?

How to change it from 5858 to 7000, for example?

How to change node.js debug port?

I&#39;m trying to attach a program with gdb but it returns:

&gt; Attaching to process 29139  
&gt;     Could not attach to process.  If your uid matches the uid of the target
&gt;     process, check the setting of /proc/sys/kernel/yama/ptrace_scope, or try
&gt;     again as the root user.  For more details, see /etc/sysctl.d/10-ptrace.conf  
&gt;     ptrace: Operation not permitted.

gdb-debugger returns &quot;Failed to attach to process, please check privileges and try again.&quot;

strace returns &quot;attach: ptrace(PTRACE_ATTACH, ...): Operation not permitted&quot;

I changed &quot;kernel.yama.ptrace_scope&quot; 1 to 0 and `/proc/sys/kernel/yama/ptrace_scope` 1 to 0 and tried `set environment LD_PRELOAD=./ptrace.so` with this:

    #include &lt;stdio.h&gt;
    int ptrace(int i, int j, int k, int l) {
        printf(&quot; ptrace(%i, %i, %i, %i), returning -1\n&quot;, i, j, k, l);
        return 0;
    }

But it still returns the same error. How can I attach it to debuggers?

How to solve &quot;ptrace operation not permitted&quot; when trying to attach GDB to a process?

I am looking at this jsfiddle: http://jsfiddle.net/carpasse/mcVfK/
It works fine that is not the problem , I just want to know how to debug through the javascript. I tried to use the debugger command and I cant find it in the sources tab?
any idea how I can debug this?

some code from the fiddle:

    angular.module(&#39;app&#39;, [&#39;appServices&#39;])
        .config([&#39;$routeProvider&#39;, function($routeProvider) {
            $routeProvider.
                    when(&#39;/home&#39;, {templateUrl: &#39;home.html&#39;,   controller: HomeCtrl}).
                    when(&#39;/list&#39;, {templateUrl: &#39;list.html&#39;,   controller: ListCtrl}).
                    when(&#39;/detail/:itemId&#39;, {templateUrl: &#39;detail.html&#39;,   controller: DetailCtrl}).
                    when(&#39;/settings&#39;, {templateUrl: &#39;settings.html&#39;,   controller: SettingsCtrl}).
                    otherwise({redirectTo: &#39;/home&#39;});
    }]);



how to debug the js in jsfiddle

When I try to debug through my code in Android (using Step Into, F7 command), the debugger takes me through all system classes, which I do not want.

For example, when I place a breakpoint at the 2nd line below (i.e. &quot;startActivity(ourIntent);&quot;), instead of going into my Activity (i.e. &quot;myclass), the execution point goes into Activity.java &gt; Instrumentation.java, etc... all system classes.

I dont want that. I only want to step through my code that I have written.

What is a way to achieve this?

            Intent ourIntent = new Intent(MainActivity.this, &quot;com.practice.gamesbook.myclass&quot;);
            startActivity(ourIntent);


&quot;Add new Pattern&quot; option under &quot;Debugger&quot; &gt; &quot;Stepping&quot; is disabled

![enter image description here][1]


  [1]: http://i.stack.imgur.com/so1Vv.jpg

(Android Studio) How to debug through my code only?

What tab in chrome inspector shows the font files you&#39;re loading via font-face? I can&#39;t find it under resources. I&#39;m having an issue where one group of font-family files are loading, but another font-family is not. I have checked everything from going directly to the URL and seeing they are indeed present, but I would like to look in the inspector and see it loading the one font-family but not the other. Is this possible with chrome?

Where to see font files loaded by chrome in the inspector?

**How can I inspect an element which disappears when my mouse moves away?**
![Example dropdown which disappears][1]

I don&#39;t know it&#39;s ID, class or anything but want to inspect it.

**Solutions I have tried:**

Run jQuery selector inside console `$(&#39;*:contains(&quot;some text&quot;)&#39;)` but didn&#39;t have any luck mainly because the element is not hidden but probably removed from the DOM tree.

Manually inspecting DOM tree for changes gives me nothing as it seems to be just too fast to notice what have changed.

  [1]: http://i.stack.imgur.com/FVOVx.png

**SUCCESS:**

I have been successful with Event breakpoints. Specifically - mousedown in my case. Just go to `Sources-&gt; Event Listener Breakpoints-&gt; Mouse-&gt; mousedown` in Chrome. After that I clicked the element I wanted to inspect and inside `Scope Variables` I saw some useful directions.

How can I inspect disappearing element in a browser?

I have Windows 8.1 installed on my computer and regularly use Fiddler to capture web traffic.

Recently, however, when I open Fiddler and have it capture web traffic, my Internet connectivity dies. The error I get when I open IE is &quot;This page cannot be displayed.&quot; In Chrome, I get &quot;The web page is not available&quot; with the following error: `Error code: ERR_CONNECTION_RESET`. 

Fiddler doesn&#39;t even capture any of the requests going out. The weird thing is, this problem randomly starts, but then in an hour or two, it&#39;s fine. I don&#39;t restart Fiddler; it just suddenly starts working again.

I tried following the steps in [Fiddler and Internet Explorer 11 on Windows 8.1][1], but that didn&#39;t help.

Why is Fiddler having this problem, and how can I fix it?


  [1]: http://fiddler2.com/blog/blog/2013/08/02/fiddler-and-internet-explorer-11-on-windows-8-1

Fiddler causes my Internet access to stop working

I&#39;ve created a very simple test case that creates a Backbone view, attaches a handler to an event, and instantiates a user-defined class. I believe that by clicking the &quot;Remove&quot; button in this sample, everything will be cleaned up and there should be no memory leaks.

A jsfiddle for the code is here: http://jsfiddle.net/4QhR2/

    // scope everything to a function
    function main() {
        
        function MyWrapper() {
            this.element = null;
        }
        MyWrapper.prototype.set = function(elem) {
            this.element = elem;
        }
        MyWrapper.prototype.get = function() {
            return this.element;
        }
        
        var MyView = Backbone.View.extend({
            tagName : &quot;div&quot;,
            id : &quot;view&quot;,
            events : {
                &quot;click #button&quot; : &quot;onButton&quot;,
            },    
            initialize : function(options) {        
                // done for demo purposes only, should be using templates
                this.html_text = &quot;&lt;input type=&#39;text&#39; id=&#39;textbox&#39; /&gt;&lt;button id=&#39;button&#39;&gt;Remove&lt;/button&gt;&quot;;        
                this.listenTo(this,&quot;all&quot;,function(){console.log(&quot;Event: &quot;+arguments[0]);});
            },
            render : function() {        
                this.$el.html(this.html_text);
                
                this.wrapper = new MyWrapper();
                this.wrapper.set(this.$(&quot;#textbox&quot;));
                this.wrapper.get().val(&quot;placeholder&quot;);
                
                return this;
            },
            onButton : function() {
                // assume this gets .remove() called on subviews (if they existed)
                this.trigger(&quot;cleanup&quot;);
                this.remove();
            }
        });
        
        var view = new MyView();
        $(&quot;#content&quot;).append(view.render().el);
    }

    main();

However, I am unclear how to use Google Chrome&#39;s profiler to verify that this is, in fact, the case. There are a gazillion things that show up on the heap profiler snapshot, and I have no idea how to decode what&#39;s good/bad. The tutorials I&#39;ve seen on it so far either just tell me to &quot;use the snapshot profiler&quot; or give me a hugely detailed manifesto on how the entire profiler works. Is it possible to just use the profiler as a tool, or do I really have to understand how the whole thing was engineered?

**EDIT:** Tutorials like these:

[Gmail memory leak fixing](https://docs.google.com/presentation/d/1wUVmf78gG-ra5aOxvTfYdiLkdGaR9OhXRnOlIcEmu2s/pub?start=false&amp;loop=false&amp;delayms=3000#slide=id.g14717ff3_0_23)

[Using DevTools](http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/)

Are representative of some of the stronger material out there, from what I&#39;ve seen. However, beyond introducing the concept of the *3 Snapshot Technique*, I find they offer very little in terms of practical knowledge (for a beginner like me). The &#39;Using DevTools&#39; tutorial doesn&#39;t work through a real example, so its vague and general conceptual description of things aren&#39;t overly helpful. As for the &#39;Gmail&#39; example:

&gt;***So you found a leak. Now what?***
&gt;
&gt;- Examine the retaining path of leaked objects in the lower half of the Profiles panel
&gt;
&gt;- If the allocation site cannot be easily inferred (i.e. event listeners):
&gt;
&gt;- Instrument the constructor of the retaining object via the JS console to save the stack trace for allocations
&gt;
&gt;- Using Closure? Enable the appropriate existing flag (i.e. goog.events.Listener.ENABLE_MONITORING) to set the creationStack property during construction

I find myself more confused after reading that, not less. And, again, it&#39;s just telling me to *do* things, not *how* to do them. From my perspective, all of the information out there is either too vague or would only make sense to someone who already understood the process.

Some of these more specific issues have been raised in [@Jonathan Naguin&#39;s answer](https://stackoverflow.com/a/19726918/20578) below.

Finding JavaScript memory leaks with Chrome

I accidently checked the &quot;disable alerts from this site&quot; box in Chrome, and now I cannot get any window.alert to work on my localhost.

I have tried resetting the settings in advanced but no luck.

Re-enabling window.alert in Chrome

Is there any way to scroll down on the page while Chrome is paused in debugger mode without unpausing?

Scrolling down in Chrome dev tools when paused in debugger

How do I undock the Chrome Developer Tools in Chrome?
Pressing the left bottom corner just moves it to the right side.

[![Chrome Corner][1]][1]  
&lt;sub&gt;(source: [github.io](http://jeremistadler.github.io/corner.png))&lt;/sub&gt;  

 [1]: https://i.stack.imgur.com/GQGBR.png

Undock Chrome Developer Tools

In Google Chrome&#39;s Developer Tools&#39; Sources tabs there is a left side panel which has three tabs with the first one being Sources. Is there a way to download a folder with multiple files and nested folders from this interface? You can right click individual files and &#39;Save as...&#39; but this is cumbersome.

How do you save an entire folder from Google Chrome&#39;s Developer Tools&#39; Sources tab?

I have tired many things but i can&#39;t get it even though my computer has it.

How can I access this wont files? They have the .woff extension. Double clicking them in chrome  inspector just takes to some url. Which doesn&#39;t work. 

Nor this font is installed on my computer. 

This is in fact first time in my life I have come across woff format and the concept web open format. I want to download the font website is using. I know I can download the images why not wont.

![enter image description here][1]


  [1]: http://i.stack.imgur.com/vAoAf.jpg

How do I download/extract font from chrome developers tools?

When I have DevTools open, there is a little button that toggles `Hide Drawer.` and `Show Console.`. Besides being inconsistently named, the &#39;drawer&#39; is very annoying to me because it takes up so much of the little screen real estate allotted for devtools (i&#39;m bottom docked). How can I keep this &#39;drawer&#39; closed permanently? Or if I can&#39;t do that, can I at least keep the height of it as low as possible? (it returns to a default height every time I open it)

Content Type	Original Author	Original Content on Stackoverflow
Question	D.R.	View Question on Stackoverflow
Solution 1 - Javascript	Konrad Dzwinel	View Answer on Stackoverflow

Chrome debugging - break on next click event

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

JavaScript string encryption and decryption?

Spring CrudRepository findByInventoryIds(List<Long> inventoryIdList) - equivalent to IN clause

Attributions