Debugging vanishing share box on Facebook - javascript

I have a few Facebook groups and pages and they all work fine with sharing whatever I want. But on my main page (last 24 hrs), whenever I try to share something, all that happens is the share box pops up for a millisecond (no text) and simply vanishes.
I’ve tried it in both Chrome and Firefox, and on different computers, cleared caches, the lot; same result. It’s a fully public page too, so it’s not a security issue, I would think.
At the moment, the only way I’m able to get a rough idea what’s going on, is using Chrome’s right click → inspect element, or Firefox’es similar function. I’m not sure what I am looking for though, and I presume there is better software to debug things like this.
What software or plugins do you need to see what the code is actually doing as it executes? And hopefully highlight hangup points or show me where the issue likely is.

If this is an issue with Facebook products and not an issue with platform, the best way to highlight this issue is to file a bug report using Facebook's Report form (https://www.facebook.com/help/326603310765065/). It is highly likely that this is a known issue that engineers are working on, but it doesn't hurt to report the bug.

Related

How to monitor or profile DOM updates in Chrome or Firefox?

I have an application (built on React) that seems to be causing more overhead -- likely DOM updates -- than it should. Normally when a user enters any data, e.g. a single character, a DOM update would occur, but a denounce has been implemented so this shouldn't happen, though perhaps the debounce itself is problematic.
While I could devise some visual ways to diagnose this, I thought it might be useful to collect profiling data, in particular, something like a histogram or graph of DOM updates per second sounds useful.
I don't mind using either Firefox or Chrome to do the profiling, but I will note as an aside that Firefox seems to be hit even harder than Chrome by this performance issue.
Honestly, the best browser is Microsoft Edge Dev. Here is a link to the download page. Edge Dev a bunch of extra options, under the Settings wheel, and turn on all the extra ones that you may need. There are 3 options but like I said I suggest Dev. It has a feature (3-D View) that enables you to see all the elements on the page and how they are stack/interacting with each other, plus you can change it to DOM View if that helps. It allows you to move around and interact with the 3-D model and it will show above what it's actually doing. It is a great way to "See" your page. You can also download Firefox Developer Edition which has Dev tools too, but not like Edge. Run your program in an Edge browser, right-click and Inspect the page, it is easier if you un-dock the console. Change the settings to fit your needs and then click the Profile Tab. You should be able to run it through there and get results. Look around in the Inspect window and the Console Tab, which will log errors and details if you choose those options, that may tell you if there is some request that is holding things up.

Reloading Hulu with Chrome Devtools open causes strange behavior

Background: I'm trying to create a chrome extension for Hulu. For now, all I'm concerned with is grabbing the titles of the movies/shows in the Comedy genre from the DOM.
Prereq to recreate the issue: I feel terrible saying this, but a Hulu subscription. I can't seem to recreate it without logging in.
Steps to recreate the issue:
Navigate over to https://www.hulu.com/genre/comedy-7d00a83e-556b-4f3c-b894-7c20f4360a1c after logging in.
Open Devtools
Enter the following in the console:
const showLinks = [...document.getElementsByTagName("a")].filter(x => x.id.includes("title"));
console.log(showLinks);
The above should print a number greater than 0, basically just grabbed all links with "title" in their ID. I may or may not pursue a better method later, just playing around for now.
Refresh the page with the Devtools open
Enter the above code snippet again. You will now notice 0 selected elements. The look and feel of the page also changes for some reason.
Any clues on why this is happening would be greatly appreciated. Any suggestions on a better way to grab all the titles would also be quite welcome! Thanks :)
Almost immediately realized my folly, the devtools defaulted to a Responsive view which must have fooled Hulu into thinking I was trying to access content through a mobile/tablet device. The error does not occur after switching to a laptop device.

Using Internet Explorer, from the UI of a website is it possible to view the Javascript that is behind certain functionality

I know a small amount of web development but not enough to make it a career. I am working for an organization that is restricted to using internet explorer and one of the main sites that we use is constantly undergoing changes and always has bugs.
I'd like to see if I can try to see some of the code behind the bugs sometimes. When I use developer tools on the site, I can see that there are about 20 or more JavaScript files downloaded. Each file is a few hundred to a few thousand lines long. Is there any type of tool that I can use in Internet Explorer browser tools that can show me what JavaScript is being executed when actions happen on the webpage?
e.g.: I click a button and a form appears. I then click a button on that form and a snackbar appears, but it always appears in random places. Is there any way I can see the JavaScript that was executed to display the snackbar, rather than search line by line in the JavaScript?
Well the answer is yes, but for more complicated sites it will be a painful experience. Without concrete knowledge of the javascript framework/library used it will often be near impossible.
Having the sourcecode for the website would help greatly. When the website has minified javascript it's pretty much a must.
Sometimes an element like a button will have an onclick attribute which makes a function call. Other time some function is attached to an element from javascript by addressing it by it's id etc.
Searching through the scripts using the F12 tools in Internet Explorer is very limited.
You can of course download some of the javascript files so you can browse them in a text/code editor. They may improve you ability to search etc.
If you can find some entry point you could use breakpoints with the debugger and step through to see what happens and what gets called.

Keep context menu open after user clicks checkbox?

I have also asked this question here at the chromium Google group.
I would like to be able to keep a context menu open even after a user checks, or unchecks, a checkbox. My plugin allows users to check which devices they are using when testing and when testing multiple devices, it is frustrating to open the context menu several times to tick each device.
Does anyone know of a way to do this? It does not seem to be supported natively. I don't really want to use some magic to re-open the menu, if possible, after a user checks a given device, hence the question here. If it is the best (yet hacky) way, then fair enough. I hope it's not! I think menu flickering would also look bad.
No, there is nothing in the API to allow that.
It might be an interesting feature request - if you're willing to spend time to formulate it at https://crbug.com/

Javascript blur() command in IE8 on Vista doesnt work

I have a project that pops up a window with a message for the user. It is displayed for 10 seconds and then is sent to the background using the javascript self.blur() command. I dont want to close it as it has information that the user might need to see agian.
This currently works for IE7/IE8/FF2/FF3 on windows XP, but on Vista it does not work for IE8. I have found that if I disable 'Protected Mode' for IE8 on Vista, the blur() command works and the window correctly returns focus to the parent window.
Does anyone know exactly why this is happening and what can be done to get around it?
Any help would be greatly appreciated!
How are you writing to the window? What is the initial source of the window -- about:blank? This may make a difference. Also, if you're loading the web page from localhost, try running it from a "real" domain.
And a suggestion: try a lightbox or some other form of DHTML "layer". They've very easy to create with the various libraries available today; not only will this tactic get around the problem you're having, it improves the experience. Probably a bigger change than you'd really like, but oh so much better in the long run.

Categories

Resources