When I have the JavaScript console open in Chrome, I am often unable to use forms, fill in inputs, or click buttons in the browser because Chrome is highlighting HTML elements for me.
Sometimes, it stops, but I don't know what I am doing to make it stop.
Is there a keyboard shortcut or something to make Chrome not highlight HTML elements and let me use the form on the page with the console open?
This irritation can be avoided by using a different keyboard shortcut. cmd+shift+c makes chrome inspect elements on the page, even after you switch to the Javascript console. cmd+option+j opens the console and lets you go on behaving like a user.
Related
I am trying to use jquery-ui's autocomplete widget (1.12) and it looks weird.
I found this question that has some advice about style, version unknown.
Normally I would open the page in chrome, open the debugger, click on the button that says "Select an element in the page to inspect it (flower up-arrow C)", then click on the element to inspect, and I'd see all the styles.
However, when I click on the debugger select, the autocomplete goes away. If I type so the autocomplete comes up, the debugger select goes away. Same behavior with the keyboard shortcuts.
How do you inspect the styles of an jquery-ui autocomplete result window in chrome?
EDIT: I never was able to inspect, but I did get .ui-menu and .ui-menu-item to work, from this answer.
You can just search the for ui-widget or ui-autocomplete in the Elements Tab of the dev tools. You should be able to find a - remove the "display: none" - this should do it.
I want to make a tinymce box disabled which I sort of manage but in chrome the content still is editable to a limited extent. I will explain below:
I first initialize the editor, then I disabled the editor if another parameter is true. I disable the editor with this command:
tinyMCE.get('taClientInformationNotebook').getBody().setAttribute('contenteditable', false);
This disabled the editor however in chrome, if I mark some text in the editor, and press any key on the keyboard the text gets replaced with the pressed character. However it is only possible to press a key once, any further input will be ignored.
So you could say that in chrome the tinymce box is disabled fully but allows for one character to be input. Very strange..
No problems in IE.
How to disable fully in chrome? I've also tried disabling the editor with other commands like "myeditor.setMode('readonly')" and "editor.settings.readOnly=true" but with the same results.
Anyone know of a way to open Chrome Dev tools to a new window upon open?
I know that I can click F12 and then click the 'customize' button and change orientation or pop out the dev tools window. But that's an extra step, and often a window resize is necessary, and when you do it 50 times a day, it gets to be tedious.
Also, sometimes, on pages I'm testing, pressing F12 will change the layout of the elements on the page and even popping out the dev tools leaves the page layout different than before I opened dev tools. This can make it hard to tell if an element is visible or not, which makes troubleshooting Webdriver more difficult.
Ideally, CTRL+F12 or something to open dev tools as a separate window would be super handy. (to any Chromium devs that might be listening ;) But if anyone has another solution, I'd love to hear it.
If you have your DevTools un-docked, the dock mode, size and position of your DevTools window will remain the same as you previously set it. For example, I just set mine to be maximised on my other monitor. Every time I open up DevTools, it's an un-docked, maximised window, and there's no change to the layout of the inspected window other than the fact it's no longer in focus.
You could alternatively launch Chrome using the --auto-open-devtools-for-tabs flag, which will automatically open DevTools in the dock mode, size and position you had it previously. You can use:
Mac:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
Windows: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
In WebDriver, you can set flags for how Chrome opens. However, after looking into this further, it turns out Chrome currently do not support multiple clients connected to the protocol simultaneously.
As for speeding things up, you can switch between dock positions with Cmd+Shift+D (Mac) or Ctrl+Shift+D (Windows). This toggles between the last two modes you have used, so say you have it docked at the bottom, you then pop it out, using the shortcut now will toggle between the two.
Here's how you do it. On opening the developer tools, with the developer tools window in focus, press F1. This will open a settings page. Check the "Auto-open DevTools for popups".
Originally documented here -- https://newbedev.com/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened.
I found a custom theme for my chrome web inspector but I need to make some small changes. Where do you find the selectors for the elements in the web inspector?
In the picture below I am trying to make the expand arrow white so you can see it against the background:
DevTools front end is an HTML page, so you can inspect its elements/layout via another instance of devtools. To do so, undock devtools, focus on its window and hit Ctrl-Shift-I (or Cmd-Opt-I on mac).
i am having some problems with the TinyMCE (V3.4.7) and JqueryUI (V1.8.14) Dialog
the following Fiddler link shows my example purfectly here
What i am trying to do is open a JqueryUI Dialog box with a TinyMCE WYSIWYG Editor in it.
the first time it displays properly. but if you click close and then reopen the box it will not show the Editor but just the TextArea.
Any help would be good. Thanks
Update
I did find out a solution that works for me, i have put up the working code here
What i am doing is check to see if the dialog has been opened before and if so just open it, then in the Open Function i test to see if the box contains an element with id_parent
if it does then this will be the editor (so do nothing) otherwise just init as usual.
it seems there is a problem with the JQuery Plug in as it does not remove the elements when you call tinyMCE.execCommand('mceRemoveControl',false,'editor_id') and when you re-add the editor it attaches to the first box available.
Problem here is that you need to shut down tinymce correctly in order to open an editor with the same id.
Use:
ed.execCommand('mceRemoveControl', false, 'editor_id');// editor_id equals the id of your textarea