For example, I want to debug the code for uploading an image when composing a post in Wordpress backend. I click the "Add Media" button, right-click on the "Media Library" tab, click the "Inspect" item on the context menu(Firefox). Then I click the "event" button at the end of a <div id="__wp-uploader-id-2...> element, and find several drop event handlers,one of which is tagged with jQuery, the others are tagged with "Bubbling DOM2". I click the event handlers and get these code:
//for jQuery event handler
function() {
t = setTimeout(function() {
r = !1, i.trigger("dropzone:leave").removeClass("drag-over")
}, 0)
}
//Bubbling DOM2 handler
function(a) {
return void 0 === n || a && n.event.triggered === a.type ? void 0 : n.event.dispatch.apply(k.elem, arguments)
}
//another Bubbling DOM2 handler
function(t) {
e(t) && (t.preventDefault(), f = [], t.dataTransfer.items && t.dataTransfer.items[0].webkitGetAsEntry ? c(t.dataTransfer.items, function() {
i.files = f, i.trigger("drop")
}) : (n.each(t.dataTransfer.files, function(e) {
a(e)
}), i.files = f, i.trigger("drop")))
}
But none of the code brings me to the real js code to handle the upload event. How can I locate the js code that really copes with the upload event? Eventually, I want to locate the php code on the server side that deals with the upload.
The Initiator column within the Network Monitor provides the JavaScript file that caused the network request.
And when you click the request there's a Stack Trace tab. shown for it providing the complete JavaScript stack trace related to it.