I have added a breakpoint to the following code in line 44 debugger;. I expected chrome to stop there every time before console.log("...") is executed. But to my surprise it stops only one time.
To test the example:
- Run the snippet below in Chrome
- Open Chrome Dev Tools
- Drag an image from another website in the drop area
At this point chrome stops at the breakpoint. But if you look in the console you should see that the console.log statement was executed two more times.
I would like to know why this happens. (Threading issue??)
And how I can solve this if I want to debug the code at this line.
$(document).ready(function() {
$('#drop-area').on("dragover", function(event) {
event.preventDefault();
event.stopPropagation();
$(this).addClass('dragging');
});
$('#drop-area').on("dragleave", function(event) {
event.preventDefault();
event.stopPropagation();
$(this).removeClass('dragging');
});
$('#drop-area').on("drop", function(event) {
event.preventDefault();
event.stopPropagation();
var count = 1;
var dropObj = event.originalEvent.dataTransfer;
for (var i = 0; i < dropObj.items.length; i++) {
var aDropItm = dropObj.items[i];
if (aDropItm.kind == "file") {
//ignore
} else {
aDropItm.getAsString(function(_str) {
debugger; //The debugger should stop here every time before the string is printed to the console
console.log("This was called [" + count++ + "] times");
});
}
}
});
});#drop-area {
background-color: red;
width: 400px;
height: 400px;
}<div id="drop-area">Drop files here...</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>EDIT
I reported this as a bug here:
https://bugs.chromium.org/p/chromium/issues/detail?id=748923