javascriptphpwordpressjquery-file-uploadfirefox-developer-tools

How to locate the js code and php code of Wordpress website for certain function?


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.


Solution

  • 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.

    Initiator column and JavaScript stack trace shown within Firefox Network Monitor