I'm running the IE11 on Win81 VM image provided by Microsoft.
The problem I'm having is that the Developer Tools' DOM Explorer tab only shows the state of the document after the page loads. Any dynamic elements added by JavaScript aren't shown. This makes it hard to debug my app.
Now, I thought that this view used to have a "refresh" button that synced the DOM Explorer view with the actual document, allowing you to inspect the current state of the page.
But I simply can't find the button. It doesn't appear on the toolbar (see below):
This is the IE version that I'm running:
Related
I'm working on a web application (IIS) targeting .NET 4.0 using Visual Studio 2015.
I have a link to a third party that I want to open in a new tab. However, if the user has already clicked it and opened the new tab and then they click the link again I don't want it to open yet another tab - it should use the tab it opened the first time they clicked.
I created a custom target name, as per this question:
How to limit the link open only once in new tab?
This works beautifully in Chrome, Firefox, and even Edge. However, it does not work in Internet Explorer - every click opens yet another tab, the same as setting the target to _blank
Unfortunately we are required to support IE11. Is there a way to get this to work in IE11?
EDIT: link code working in all but IE11
<a target="ThirdPartyLink" linkinfo="../THIRDPARTY/THIRDPARTYSSO.ASPX" href="#">Facility</a>
I finally got it to work in IE11 by adding the third-party URL to my Trusted Sites.
Now that Firebug is fading away, Firefox users are asked to switch over to the Firefox Developer Tools.
Therefore I am wondering, which features do the Firefox DevTools have that are not offered by the Chrome DevTools?
Can you please give me an objective answer to this question?
From the docs:
DOM Property Viewer
Inspect the page's DOM properties, functions, etc.
(You'll notice properties of the object are not usually listed in console in Chrome, you would never know that body.innerHTML existed, looking at "document.body" in the console.)
Developer Toolbar
A command-line interface for the developer tools.
Shader Editor
View and edit the vertex and fragment shaders used by WebGL.
Web Audio Editor
Examine the graph of audio nodes in an audio context, and modify their parameters.
Taking screenshots
Take a screenshot of the entire page or of a single element.
Some extra tools in the settings panel:
Measure a portion of the page
Scratchpad
The network panel shows the stack trace of the cause of each network request, in Chrome you have to go through console log of network requests and find the one and expand it. Also, you can see the actual preview (in preview tab) of a xhr response if it happens to be html returned.
And perhaps the most useful, the inspector shows (ev) beside every element with an event listener on it, with direct listing of everything that adds event listener to it. (nicer than Chrome's event tab listing to the right.)
Firefox DevTools
As far as I can see, the Firefox Developer Tools (as of Firefox 54.0.1) have a lot of niche features over the Chrome Developer Tools (as of Chrome 59.0), i.e. very specific tools that are presumably used by a rather small group of people. Besides those special tools, the Firefox Developer Tools also have several core features the Chrome Developer Tools are missing.
The different features are:
Canvas Editor
Web Audio Editor
Shader Editor
Developer Toolbar (GCLI) (will be removed)
Scratchpad
DOM Inspector
Page rulers
Screenshot tools
Font Inspector
Grid Inspector
Measure portions of the page
Firebug theme (got removed in Firefox 61)
Switch between iframes
Tools to debug the browser UI
Security info for individual network requests
Network caching comparison
Chrome DevTools
The Chrome DevTools (as of Chrome 59.0) have more features regarding the standard tools and they provide other niche tools.
Those features include:
DOM and XHR breakpoints
Event listeners panel
Properties panel
Security Inspector
Audits
Touch simulation and pixel density in device emulation
Live editing in Sources panel
Workspaces
Network request blocking
Advanced memory tooling
Manifest, service worker & application cache inspector
Scroll performance issues highlighter
Frames per second meter
CSS Media emulation
Global file search
Code coverage analyser
Geolocation, orientation, and touch emulation
Local overriding of CSS styles
Also, they differ in many smaller features and in their settings.
I am using WordPress and on the admin side when I use Google Chrome v.32 Element Inspector (Developer Tools) some of the elements in my HTML seems to be removed. But when I load my page without the Developer Tools all my elements are there.
I did not have this problem with the previous version of Google Chrome.
I cannot post the code here, first because it's way to long and second I am not allowed. But maybe others have experienced the same problem and others might even have the solution.
I know it is not my JavaScript because it is not even downloaded the script elements have been removed for some reason because of the Developer Tools being open.
Basically why when I have the Developer Tools open for a page that page as some of it's elements removed and when I re-load the page without Developer Tools everything is back to normal?
My bad. For some reason the emulator was open. And set like this:
All I had to do is unchecked "Spoof user agent".
According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.
To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.
And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/
Follow these easy steps!
Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:
Press Command+Option+i again on this new window.
That will open the DevTools on the DevTools.
You can redock the page's DevTools if you want.
If it's not already, select Elements — it's the first icon at the top of the inspector.
A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.
Open chrome://inspect
Open the inspector on that page (cmd + alt + i)
Scroll to the bottom of the page, under the Other section click the inspect link
The URL in the Other section should look something like this:
chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…
EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.
I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.
on OSX, open an terminal window and execute the following:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
On windows, Its
chrome.exe --remote-debugging-port=9222
(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)
This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.
If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)
Now, go ahead and navigate to
http://localhost:9222
It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.
Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.
A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.
Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..
Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.
What combination of html and IE8 settings get IE8 to open links in a new tab. Or can you not do this with IE8, and you only get the new tabs by manually selecting File-> new/duplicate tab?
My website works in Firefox - pages on the site load in the current tab, and links off site load a new tab. IE8 won't behave: target="_blank" opens a whole new window; the other options, _self _top _parent, all open the page in the current tab.
I have Firefox set to "Open new windows in a new tab." The links to pages on my site all have target="_self" and Firefox keeps these in the current tab. On the external links I don't have a target set (I added _blank to see if it fixed IE8, and doing that didn't affect Firefox).
I can't find an equivalent setting in IE8. Tools-Internet Options-General-Tabs/Settings has an enable tabs box, and a sub-option to automatically switch to newly opened tabs. Is there some html that will work? An IE8 setting I'm missing?
Any help appreciated.
It is not a thing you can control from HTML code, as it should be user's, not document author's decision how to open a link.
To open pop-up windows in new tab, follow instructions from IE8 help:
To change how pop-ups are displayed
In Internet Explorer, click the Tools
button, and then click Internet
Options. Click the General tab, and
then, in the Tabs section, click
Settings. Make a selection in the
When a pop-up is encountered section.
Click OK twice.
Updated:
Reading OPs comments to other posts, it seems like the intent is to make all external links open in new tabs. However, it is not document author's choice how the client should open any link in any page - it has to be decided by the client. Moreover, even though you can create a client-side script which sets "target" property to open pop-up windows, there is no notion of "tab" in Document Object Model and hence you cannot do it even in a script.
The answer to the question was posted in the comments (but is now deleted). Now you can test it in IE8 - just use the middle mouse button to open the link in a new tab. Firefox does work better with tabs.
How the browser interprets the target is browser dependent - each vendor will specify what they want. Firefox decided to use a new tab, IE decided to use a new window.
The html 4.01 spec has this to say on "_blank":
The user agent should load the designated document in a new, unnamed window.
The spec predates the wide usage tabbed browsing now has, so doesn't mention the concept anywhere.
Opening a page in a new tab is concept that believe is not covered by the html standard. The Firefox behavior is just a setting in the browser, which IE8 might or might not have.
On a related note, I personally find it abusive of websites to make the choice of opening a page in a new tab/window. What if I want it to open in the current tab/window?
Of course, in a rich application-like site that is basically entirely an application I find it convenient that pages open in a new tab/window. This makes them work more like desktop apps
For normal pages, I would suggest not setting the target at all and let the user decide.
I think W3.org is still working on this issue, but it isn't implemented in any browser yet. Also remember that Internet Explorer will be the last browser to implement it ;)
This is code copied from a W3 Working Draft:
/* If a user wanted to have new windows open in new tabs instead, she could use the following user style sheet to do so: */
* { target-new: tab ! important }
Of course, it is impossible to set user preference in HTML or Javascript -- it would be unsafe.