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.
Related
I'm seeing an odd bug in IE that I'm not seeing in Chrome. Specifically, this involves some JS code not firing when a (Telerik) wizard is navigated back to it's first step.
When the user clicks their "Previous" button, some data isn't being properly loaded. Hitting F12 and bringing up the developer console has shown me the following Warning:
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
Ok, so I go to the link provided and I noticed the documentation states:
In order to be cached, webpages must meet these conditions:
...
- The F12 Developer tools window isn't open
This is a problem, because when I use the navigation buttons within my wizard WHILE the dev window is open, it behaves properly, just as it does in Chrome.
How can I debug my related Javascript so I can figure out what's going on? Also, I understand what caching is but I'm not exactly sure what this is about and I have no idea why Chrome behaves differently. Is there a way that I can force IE to behave like chrome and cut on (or off) whatever features that are causing this issue?
Yuck. Back to old school debugging for you.
Short of putting the whole browser into a Windows debugger, you can pretty much forget about setting breakpoints. All you can do is log.
If you are lucky and your problem isn't too deep, you can use a sprinkling of simple alert() statements to let you know the state of things at various stages in your code. One nice thing is that you can serialize objects now pretty nicely; for example, you can do JSON.stringify(this), which will probably give you a giant output, which you can copy and paste into your IDE and unpack. A major upside to doing this is that the alert will block, so you can take your time studying the output. A major downside to this is that race conditions are now much more likely.
Alternatively, you can add a <textarea> to the page and throw your JSON.stringify(this) results into that. Because this means extra DOM mutations, it also increases the odds of race conditions, but not by much. (If race conditions are a possibility, you can do this:
(function () {
var currentState = JSON.stringify(this);
setTimeout(function () {
document.querySelector('textarea').value = currentState;
}, 1000);
})()
Even though these are now asynchronous, if you use this multiple times in sequence, these will execute in that same sequence (unless you change the timeout period).
If you are doing actual page navigations (and not just changing the URL with pushState()), then actually reading those logs is going to be a problem. The solution is to put the page in a frame and write the content out to a sibling frame. As long as both frames are running on the same domain, you will have no problem pushing the data into the sibling frame. If you can't put them on the same domain, you are kind of screwed.
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.
I have a php page that hangs for 3-10 seconds after the page loads, you can't even scroll up or down, or close the tab when this happens. (the chrome loading gif still loops tho) Happens in Chrome and IE.
Chrome Timeline: http://imgur.com/wF5Pioz,KRbnxIm#0
Shows ContentVeil.js repeating over and over. I think it is client side(?), I did a grepWIN to search for ContentVeil, with no luck, and it doesn't show up in Chrome Network tab.
Chrome Profile: Second image, from above link.
I think this shows the issue at the anonymous function from meta-boxes.min.js, ln 1.
meta-boxes.min.js: http://pastebin.com/yqtJyqB1
Unfortunately line one is a function that encapsulates the whole script. I don't know js very well, I tried to just remove each function one by one but that just created more errors.
Any ideas on how I could find the source of the problem would be much appreciated.
It's part of the Evernote web clipping extension, and it's hooks DOM events, causing massive slowdowns if you are doing large amount of dom changes.
I'm not normally in a need to ask basic or vague JavaScript questions on SO, so pardon me if there is little details here - I'm not sure how to get more.
In the online user manual I'm maintaining, I'm adding custom buttons on each page to get a direct link to the current page (otherwise grabbing the URL just brings you to the home screen), as well as a few extra features. These buttons are added using Javascript, or rather they are already hidden in the HTML, are updated after an AJAX call and then displayed.
It has taken me a lot of work to get these working, in Firefox, Chrome, IE6, 7, 8, 9, I'm sure you know how these things go.
Now comes IE10 with yet another really weird behavior that I want to bang my head on the wall for. If you visit http://help.objectiflune.com/en/knowledgebase/ you will see those buttons on the right inside the main frame. They're grey and blue, top of the page.
So this first "welcome" page is fine, it works great, no issue. However, if you navigate to any sub page using the TOC on the left (such as Error Codes -> PlanetPress Design -> PlanetPress Design Error PXXXX), the buttons all disappear.
I've also noticed that if you get the URL for the page itself (inside the frame, again) and you open it in another tab, it first does not show them, but then refreshing the page makes the buttons appear.
I've tried using the F12 developper console, but it requires refreshing the page to show the console so I can`t use it in those new tabs. As for using within the whole frame system, it doesn't seem to be showing me any errors, nothing weird.
Again I'm sorry if this is an "it's not working" with no further technical details, but... there are none I know how to give.
UPDATE: For the specific code, please turn to http://help.objectiflune.com/common/scripts/olCommon.js , and look at the function starting at line 207 (function buildMenu()). this is the function that retrieves the information and displays the appropriate menus, such as $("#guidebuttons").show();
In ObjectifLune.css, #buttoncontainer has display: none. Navigating through the F12 window, the display of that object is none:
I would guess that somewhere in your JS, you're setting the display to block, but there's something wrong with that code in IE.
I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.
I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?
I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.
I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.
It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.
// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('body').css('margin-bottom', '400px');
}
Hopefully this will be of use to somebody.
EDIT:
WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.
Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.
To perform this, just press the center button in the Firebug Lite window located at the top right corner.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
This way, you'll have two separate areas that don't overlap yet play nicely together.
Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.
More importantly thought, you can actually use BOTH consoles at the same time.
This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image