I want to debug a page, which looks like this in its <head> section:
I want to debug the case when the https://example.com/some-js-from-external-site.js is unable to load without making any changes to the page. Is it possible to use Chrome Dev Tools to "simulate" that the URL returns a 404 or something?
Thanks,
Related
I am trying to debug a webpage with chrome developer tools and the page redirects to a pdf file after it loads. I checked JavaScript files and there is not any place that we redirect the page. I cannot find any related message in developer tool console or network tab.
I activated event Listener Breakpoints -> beforeunload but it stops at an external js file (Placeholders.js) which is not related to redirecting.
Also, preserving Logs in network tab does not help me on finding root cause of redirect.
I am wondering how can I find the source of this redirect?
UPDATE: There is not any "refresh" meta tag in the html code.
There are a couple of things you can do. You can use the Event Listener Breakpoint -> Load - unload and then when it breaks in the 3rd party library, right click and select Blackbox Script. The next time you play through the code, it should only break in your own code (assuming there are no other 3rd party libraries to blackbox).
Another option is to go to the Network tab and check the Preserve Log checkbox. This will persist all requests between page loads/navigation, so that you will be able to find the network request that returned the PDF response.
.
In Chrome's developer tools, under the "Network" tab, I can see redirect paths and HTTP status code if I check "Preserve log". See image above, where you can see the domain ap.no redirect to
www.aftenposten.no and returning a status code 301.
My problem is that it doesn't work for all sites. Are there situations where Chrome will not be able to know that a redirect has happened?
One example is amazon.com, which redirects to www.amazon.com, but I cannot see the redirect in Chrome's developer tools.
Is there another way to see the redirect info in these cases where Chrome doesn't seem to pick it up?
Try these methods to get around the issue (in order of complexity):
Use an incognito window when you load the page.
Use the extension "Cache Killer" to disable caching of data.
If all else fails, clear all browsing data from Chrome.
In this instance, only clearing browsing data helped, but I regularly use Cache Killer and incognito window when I am testing my own websites.
I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.
Is there any tools or way to debug on Facebook Browser? Thanks.
This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.
tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.
Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this
http://192.xxx.1.127:3000/facebook-test
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)
function debug(str){$('body').append("<br>"+str);}
Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers
It looks like a recent Chrome update broke this by tightening mixed content (https/http) security policies, and I read that Firefox plans to do this too.
Here's the issue:
Say I set the Secure Canvas URL of my app to https://themediadudes.com/httpstest/
That page contains only a link to Google:
Google
When I view the app on Facebook and click the link, nothing happens. An error appears in the console:
[blocked] The page at https://apps.facebook.com/myappname/ ran insecure
content from http://www.google.com/.
I understand that having insecure scripts/stylesheets etc. on an https page isn't allowed, but a simple link to a different website shouldn't be blocked right?. I assume Facebook is running some scripts which do something with the page before sending the user there? Which causes the error.
If I set the target of the link to _top or _blank it works.
Ideally I want to be able to use a javascript window.location to send the user to this insecure URL, or header('Location: blah'); in PHP. But neither of those work either. And it looks like this is a bigger problem than that if even a simple link to an insecure URL doesn't work.
I thought it may be caused by whatever makes the 'fluid' canvas width and canvas height settings work. But I tried setting both width and height to fixed and the problem still happens.
Does anybody have a solution or workaround, or can anybody at least shed some more light on this?
Thanks
I've been struggling with a similar issue and the answer seems to be that it is not possible at all to reference any non-https resources from within your page tab app. Of course if a google link is all you require then that is simply resolved (as google has a https version of course) but referencing external non-https sites will always turn up this warning/block in chrome
Additionally, I should add that I have noticed that the 'page tab URL' section requires a url to a particular page, whereas the 'canvas URL' needs to link to a directory. This does not seem to be documented and will also give the insecure content message in chrome and prevent the page tab app from loading
I believe my site has the correct markup for Facebook & Open Graph meta tags. But checking Facebook's linter shows that none of the tags are being detected. You can see for yourself here:
http://developers.facebook.com/tools/debug/og/object?q=goodloesolitaire.com
When I use a different site, the tags are found:
http://www.opengraph.in/?url=goodloesolitaire.com&format=html
I went through the similar questions and none of those check out. Any ideas on why Facebook's debugger might see nothing?
Facebook is seeing HTTP code 206 "Partial Content" instead of normal 200 "OK".
206 "Partial Content": This message might occur if a client has a
partial copy of content in its cache and requests and update of missing
content. This message indicates that the partial request succeeded.
I found one old forum post about it: http://forum.developers.facebook.net/viewtopic.php?id=68440
It looks like it might be a server configuration issue to do with caching. Do you run Varnish or anything like that on your server? Check in to that.
Another thing to try might be to move your charset meta tag below your Open Graph tags, so Facebook knows the right encoding to parse them with. Also, using this type tag might work better:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Finally, make sure you don't have anything blocking the Facebook scraper user agent. As mentioned in their documentation:
Our bot functions with the User Agent "facebookexternalhit/*". Make
sure you're not blocking that user agent. Also, make sure Facebook's
servers can reach your server.
If You are using Varnish:
Put
if (req.http.user-agent ~ "facebookexternalhit")
{
return(pipe);
}
Inside your sub vcl_recv:
sub vcl_recv
{
}
It worked very well.
We use Varnish so this did the trick for us:
if (req.http.user-agent ~ "facebookexternalhit")
{
return(pipe);
}
https://www.varnish-cache.org/lists/pipermail/varnish-misc/2011-February/020060.html