We Keep Coding

How can I use inspect elements on Chrome to identify the source of a particular section of a website?

This may sound like a really stupid question for you guys, but how can I use the inspect elements tool on Chrome to identify the source of a particular section of a website? To make it simpler to understand, I want to modify the footer of a particular website (WordPress based).
The problem is that the footer was customized (which means I can’t edit through the WP backend) so I need to find where exactly or what’s generating this footer.
Does this make any sense to you?

I'm pretty sure you can't do this in Developer tools as wordpress is PHP based, chrome only sees the compile code.
What I would do in your situation is to try searching the theme folder for an ID, Class or piece of code that is unique to the footer and try that way.

This can be done by visting the website, right clicking and selecting Inspect.
The developer tools dropdown will appear. In the top left corner there is an icon with a pointer hovering over a screen (this is the inspect element tool). Click this, and move your pointer on to the part of the webpage you wish to find the HTML for.
The html for that part of the website will be highlighted in the developer window, making it easy for you to see.
You can then either , edit inline in the browser to get an immediate view of the changed code (this will not be permanent, or change you code file), or use that location, to return to your WP editor and make permanent changes.

What does paragraph about figuring out XUL elements mean in MDN document: "How to convert an overlay extension to restartless"

Recently a friend of mine and I have been working on a Firefox extension. He handed the code to me today, and I've been trying to make it restartless. I used the tutorial from How to convert an overlay extension to restartless (on MDN). Since I don't have much experience working with JavaScript and extensions in general, I was wondering if anyone could help to understand what step number 6 means here in this tutorial. They are saying we can't use "no more XUL overlays", and I understand this. What I don't understand is that how to this part:
Figure out what XUL elements you need to create for your add-on to add your interface, where it needs to go into a XUL window, and how to do it. Docs: document.getElementByID(), document.createElement(), Element reference, Node reference (DOM elements are also nodes).
I decided against using document.loadOverlay, since it's very buggy. I'm not sure if this helps much, but here is the code for our overlay.xul. Again, sorry if the question is really basic, any help is much appreciated. If I need to provide more code please let me know. At this point I thought only the code for our overlay.xul file is important.
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="my-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript;version=1.7" src="overlay.js"/>
</overlay>

XUL overlays can be used for a wide variety of things in Firefox. Step 6: No more XUL overlays focuses more on UI elements than other possible uses of overlays (e.g. loading scripts, as you are doing).
In an XUL overlay extension, the UI elements are generally added by providing an XUL overlay file for each portion of the interface which is modified. The XUL overlay extension does not need to consider removal of the interface elements, as they are only removed when the extension is removed or disabled.
In a restartless extension, all UI elements are added programmatically each time the extension is started. Some UI elements are added once; and some must be added both to each open window and when each new window is opened. When the extension is disabled, or removed, the UI elements must be programmatically removed completely from Firefox.
The portion you quoted is attempting to describe the process of converting an actual XUL overlay (used to modify the Firefox UI) to programmatically inserting (and removing) the UI elements. The most common UI element is probably a toolbar button, but it could be anything. Because it could be anything, the description is relatively vague.
That entire section, Step 6: No more XUL overlays, could definitely use some expansion. I remember planning to do so based on the code I used when converting an extension from XUL to overlay. I had wanted to clean the code up a bit, and account for more cases. However, having an example in there would be helpful. I'll see if I can update it in the next week or so (if someone else does not beat me to it).
In your case:
Based on the overlay code which you included in your question, this section is not talking as directly about how you are using your XUL overlay as might be desired. The part you quoted:
Figure out what XUL elements you need to create for your add-on to add your interface, where it needs to go into a XUL window, and how to do it. Docs: [document.getElementByID()][3], [document.createElement()][4], [Element reference][5], [Node reference][6] (DOM elements are also nodes).
is specifically talking about adding UI elements to Firefox, which is not what you are doing with your overlay.
What you are going to need to do is determine how you are going to apply your script, overlay.js, to whatever it is that you are adding it to. Remember, you also need to be able to remove it when your extension is disabled/removed/updated.
In order to provide more detailed information, we are going to need to know what it is that you are adding your script to. For this, we probably need you to include a copy of your chrome.manifest file. It might be helpful to know what your script does as the functionality may be more appropriately handled without applying the script in the way implied by an overlay. However, you should ask this as a new, separate question, not modify this question to ask something different.

How to find which script modifies css of selected attribute

Is there a way to get information which scripts modified selected DOM element, and in which order?
On my website, I modify width of div A. It appears however, that some other script modifies that width after that, but I do not know which script it is. How can I find it?
Edit:
After searching a bit more, I fount that in firebug you can right click attribute in HTML view, and select "stop javascript on change" (or sth similar, my firefox is not in english), the problem being it resets after reloading the page, what makes it useles for me.

I am using chrome developer tools to debug my page. It supports add breakpoints to dom elements, when attributes of dom is modified by javascript, it breaks the rendering process immediately. I think you can try it.

Can The Preview Pane in the MarkdownDeep Markdown Editor be Disabled?

I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?

In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.

I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?

I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js

JQuery tool to show selected DOM elements in real time

I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!

A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
$("p").css("background-color", "gray");
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.