Inspect the Markup used in CKEditor Styles Dropdown - ckeditor

I want to inspect the markup of CKEditors Styles Dropdown.
The problem is, I can't click firebugs 'inspect'-button, because the dropdown immediately closes when clicking somewhere outside of it.
I want to see what exact markup is being used so I can style it better.

I found a way to do it even if it is a little tricky.
If you are using Chrome you can press F8 while having the developer tools opened. F8 pauses on next script execution.
So if you hover over the desired element, then press F8, then move your mouse a bit inside/over the element, the script execution will pause with that dropdown opened and you will be able to rightclick -> inspect it, as long as in pause.

Related

three.js editor history: how do I get the commands into a script

So, as a web developer veteran (but a total, complete 3D noob) I'm impressed by what I can do with my models in the three.js editor
I see I can "rewind" my actions in the editor by clicking on the commands listed in the History panel..
Is there an easy way to see the actual javascript that lies underneath these command buttons (similar to the way you can copy your recent commands from the Log panel in Clara.IO's editing platform)?
You can try setting up breakpoints around the DOM elements in the history pane. What I tried is open Developer Pane in Chrome, click sources pane, and set up an event listener event breakpoint for mouse click.
Now if you click an item in history pane, you will be brought to stop on the function onClick in ui.three.js. You can step in to examine the JS code it is about to execute.
Hope that helps.

Whats the meaning of the "build&run" button's arrow?

Out of curiosity, when you open xCode and you want to run your app, you must to click "Play" button:
But when you hover this section, a little arrow appears (downright)
Does anybody know the meaning of that element, I thought it was a hidden menu.
When you click and hold on that button, a Menu will appear where you can switch the default action for this button.
You can see the other options here:
Note that you can modify these options by holding either shift (just build), alt (brings up the scheme selector for that scheme first) or ctrl (don't build, just run).

working with xamarin code templates

I am trying understand hot xamarin code templates work and how to use it.
By reading the manual it appears the a user can select the code templates by clicking on it or hitting enter on it. Just like in eclipse and intellij.
But this seems not to work the same way in xamarin.
For example after I typed "try" in the editor and hit ctrl+space to get the code complete. Now I am presented with options to select. When I select try and click or hit Enter on it nothing happens. The code complete window just closes and the template is not added.
The animated gif demonstrates it with the mouse click event. But the behavior is the same for key events. Also no matter what I template I select it is never pasted.
You need to press tab key after you have selected the text. You basically have to press tab - tab. The first tab will complete the try text in your example. You may have only typed in t or tr. The second tab key press will expand the code template.
The behaviour is similar to Visual Studio. The difference is that Visual Studio gives you more information in the completion window that appears telling you that you need to press the tab key twice. Screenshot from Visual Studio is shown below.
With the screenshot above pressing tab once will close the completion window but not insert the code for the try template. Pressing tab again will insert the code template text.

Setting a conditional breakpoint in Firebug for Mac

I can't seem to set a conditional breakpoint in Firebug. Every Google search I've done indicates that I should be able to Right-click the line of code in question, at which point a "bubble" will appear asking me for the condition on which the break should be executed. Right clicking does in fact toggle the breakpoint's existence, but no bubble appears. How/where do I enter my condition?
Of course Mac mouses don't have a "right-click" button but assumed I could simulate right-click using Control. I've also tried Alt and Command to no avail.
I am running on Mac/Yosemite.
Thanks.
To be precise you need to right-click the breakpoint column or right-click inside the line and then choose Edit Breakpoint Condition... from the context menu. If you do so the condition editor should appear, which looks like this on Windows (on Mac it's black):
There is currently (Firebug 2.0.x) no keyboard shortcut for this action, so right-clicking is not working for you, it might be a bug in Firebug. In that case you should go through the steps described at Firebug's first aid page and file a bug if the steps don't help you.

Start Firebug when radio button is clicked

I have a complicated mess of code (built by a team of 7 over the course of several years) that incorporates multiple libraries - jQuery and angularjs, specifically.
I know that the value of a variable changes when I click a certain radio button, but I have no idea what is running when that happens to cause the variable to change. I've tried console.log in every place I can think of, but am somehow still missing the action that's changing the variable.
I know how to debug with Firebug if I know where to place my breakpoint, but in this case, I don't. Is there any way to tell Firebug to start debugging at the line that executes immediately after the radio button is clicked? In other words, when I click the radio button, open Firebug's Script panel to the first line in order of execution, wherever that line may be.
If you have chrome you can right click on the checkbox -> inspect element -> event listeners
Is there any way to tell Firebug to start debugging at the line that
executes immediately after the radio button is clicked?
Yes, this feature is called Break On Next.
Note that Firebug has much more features to debug your scripts besides setting breakpoints within the Script panel. These features are described in the 'Script Debugging' page inside the Firebug wiki.
Furthermore the Watch side panel allows you to inspect the variable to see, at which step it is changed.

Resources