Whenever I try inspect element nothing comes up. I'm on Chrome. I get the
Elements | Network | Sources | Timeline | Profiles | Resources | Audits | Console
menu and then a sub menu in each of those of the following:
Console | Search | Emulation | Rendering
Where do I go to see the source code? Previously I would just inspect element and it would come up, did I mess around with the configuration accidentally?
Thanks!
It might be a cache issue. After opening Developer Tools(F12) in Chrome, refresh cache by pressing Ctrl + F5.
There may be another panel open. Do you have a little handle icon somewhere on the right hand side? If so grab that and pull the panel down.
The source can be found by elements.
Do you see the magnifier next to elements?
In that case you can select the element that you want to inspect
If you want to view the javascript or loaded files you can view these at sources. By using Ctrl+O you can select the source file you want to see.
If your information is loaded by AJAX, your Javascript cant be inspected. HTML loaded by AJAX can be viewed by first open the page where your content will be shown, and after that you can inspect the page.
You can also use CTRL+U, that works better than view-source
I had the same issue. Somehow on the toolbar (where we also have filter option), Img tab was selected instead of All.
There may be another panel open. Do you happen to have a little handle icon somewhere on the right-hand side? If so, grab the handle icon and pull the panel down.
Related
Is there a way to navigate up and down the highlights as in the screenshot?
I read the article here: https://www.jetbrains.com/help/phpstorm/navigating-through-the-source-code.html but couldn't find what I'm looking for
Basic usage is I just want to sprinkle a bunch of highlights around the code and be able to jump between them using a shortcut.
I know that an alternative would be to use the favorites, but I want to see if it can be done using highlights.
I'm on a Mac.
I just want to sprinkle a bunch of highlights around the code and be able to jump between them using a shortcut.
Navigate > Back and Navigate > Forward should work ideally in that case.
According to your comment above, you're using these breakpoints as a kind of visible bookmark within your code. However, IntelliJ does have a Bookmarks feature.
I would therefore suggest to simply alter the way they appear so they stick out more:
Go to File | Settings | Editor | Color Scheme | General
On the right pane, expand/select Editor | Bookmarks
Adjust the background and/or foreground colors on the right (and more if needed)
Here's an example with funky bookmarks (pardon my light theme):
You can then navigate between them using:
Navigate | Bookmarks | Previous Bookmark
Navigate | Bookmarks | Next Bookmark
I have a rogue blank <div> getting inserted from somewhere in my code, and it is difficult to find when it is coming in. I am using debugger; and stepping through the code, however, the step function is in the 'Sources' tab of chrome dev tools, and the 'Elements' tab has the view I need. I have two screens, and have the dev tools on one screen and the page on the other, but I need to see when the div is coming through on the HTML as I step through the code, and it is quite cumbersome to switch tabs after each click.
Is there any way to accomplish this view to troubleshoot faster (maybe a second instance of dev tools? or split the tabs?), or another suggestion? Since I don't know how it is getting generated, I can't color the div and just look for the color to come on screen...
It is still not possible to display the elements and source tabs at the same time on chrome dev tools. (Latest Chrome version: v64).
If some element is inserted to your DOM and you want to find code responsible for adding it then I suggest using more appropriate tool than debugger;. Check out "subtree modifications":
You can now right click the view tab and select "Move to bottom" so you can see both element and sources at the
Now its possible to view the element and page source in the same page.
Follow the steps below:
Open debugger or Ctrl+Shift+C
From Right corner press the "customize and control Dev tools" icon, under those option click show console drawer:
Now from the left bottom, click on the quick source option as shown in picture:
All the js files opened in sources will be seen here:
I don't know what I've switched on (by accident) but every time I have the Inspect Element area open and then try to click anything on the webpage not within the Inspect Element area (especially something jQuery related like a slideshow for example) it greys the page, shows a message saying 'Paused in debugger' and then opens a jQuery file within the Sources section of Inspect Element.
Within the 'Call Stack' area, it shows a message saying 'Paused on a "click" Event Listener'.
I don't remember switching this feature on but I'm keen for it to be switched off.
I know this question has been asked before - I thought I'd found the answer when everyone suggested we look to see if the 'Pause' option is switched on (blue). However, it's not switched on, it's grey not blue or any other colour and when I hover over it, it says "Don't pause on exceptions. Click to Pause on all exceptions".
You might also check the Source tab, check under the Event Listener Breakpoints panel if you've set any breakpoints under 'Mouse'.
This can also cause the issue
Break Point icon at top left should be blue like this(For Deactivate BreakPoints)
Should not grey like this
Found solution here, if the little octagonal stop/pause sign (at lower left of Chrome "Sources") is colored (blue or purple), you need to click on it until it's black again.
It did drive me nuts for a short while.....scroll all the way to the bottom of breakpoint window and you'll find XHR Breakpoints & under it there is the Any XHR checkbox...
Goto the sources tab and check all breakpoints.
Go to Elements tab and remove all breakpoints from right pane under DOM Breakpoints
One possible cause, it that you've enabled the "pause on exceptions" (the little stop-sign shaped icon with the pause (||) symbol with in in the lower left of the window). Try clicking that back to the off/grey state (not red nor blue states) and reload the page.
For me, I resolved it by temporarily disabling the Chrome Bitwarden extension.
You could check to see in the Sources tab in the devtools panel to see what is causing this error, it could be an extension.
To open the devtools panel on Chrome, press the F12 key.
For Visual Studio Users, just go Tools>Options>Debugging and make disabled it
Was just trying to cobble a quick site together as a favour for my sister. It's based on a template she bought and I've just quickly bunged her copy/pictures in, so I'm aware the markup is far from perfect. That said, I can't see how it would be causing the following issue...
The template uses a jQuery plugin called jScrollPane to make the content sections scrollable. Sometimes however, in Chrome (v20) this doesn't work - it doesn't let you scroll all the way down.
What's really odd though, is the pattern I've found that seems to effect whether it works or not. Try the following
Go to http://mattandkate2012.co.uk in Google Chrome - click 'Ceremony' - can you scroll down far enough to see the map? I can't.
Press the reload icon, click 'Ceremony' - can you scroll down? I can't.
Select the URL in the browser URL bar, press enter - can you scroll down? I can now!
Does everyone else get the same results as above, and do you have any idea why pressing enter in the URL bar has a different effect to the reload button?
This functionality works fine in Firefox and even IE!
Thanks
Pete
From a very quick look I guess it's because the section contains an image and you aren't re-initialising jScrollPane once the image loads. See:
http://jscrollpane.kelvinluck.com/image.html
The difference between refreshing and pressing enter in the location bar is that the cached image is shown when you press enter in the location bar...
I would suggest moving the call to $('.content').jScrollPane({showArrows: true}); to inside the $(document).ready block - if you call it before the document is ready often images or other elements won't have loaded and so the height of the containers will be wrong.
Every solution I've seen so far for opening a new browser window uses the target property in to set it to "_blank". This is frustrating because in some browsers it only opens a new tab AND combine that with the auto-resizing behvaiour at http://www.facebook.com/connect/prompt_feed.php?&message=test, it basically mangles my browser whenever I try updating my status from my site.
How can I be sure to open a new window when a user clicks on a link?
Thanks!
Trindaz on Fedang
Popups are windows, they just have some features disables. You can make a popup act like a regular window by enabling these features. For example, if you open a popup with
window.open('url', 'name', 'width=500, height=500, status=1, toolbar=1, location=1, menubar=1, resizable=1');
the window will have a toolbar, a URL bar, a status bar, menus, and it will be resizable. It will the same as any other window.
Keep in mind, however, that many browsers block window.open() under some conditions, and some of them will open new tabs if you specify a lot of features. Some are weird about it too; Chrome, for example, uses scroll bars on popups by default, but if you specifically tell it to use scroll bars in a popup (using scrollbars=1), it will open in a tab instead.
So basically there is no way to be completely sure that your page will always open in a new window, because browsers all handle this stuff differently, users can change settings too. The code above is probably your best bet if you have to have a new window, but you might want to look into other options.
window.open(URL,name,specs,replace)
function newwindow()
{
myWindow=window.open('','','width=300,height=300');
myWindow.document.write("<p>This should open in a popup</p>");
myWindow.focus();
}
There is a legitimate reason for using Target=_blank that everybody has completely overlooked, and that is when a website is written as a BOOK with chapters/pages and the Table of Contents must remain intact without using the BACK button to reload the previous page (Table of Contents). This way all a surfer needs to do is close the Target Page when finished reading and they will be back to the Table of Contents.
Lucky for us that HTML5 has reinstated the Target="_blank" code, but unfortunately the "Block Popups" must be unchecked for it to work.