New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
[馃悰] Hacking instructor: DevTools open detection is CPU and RAM heavy and never stops #1525
Comments
Does this properly detect if your dev tools are opened? Edit: Tried it out, wow you're totally right, had to force quit my browser as it wasn't responding anymore 馃槵馃槄 Might be possible if I understand the detection method correctly to use a "more" light weight element then the image element for the logs. Light weight meaning a element with less properties |
If the DevTools detection is only possible in a "whacky" way, then we can also drop it entirely as it was before. The tutorial would still be fine, it just made it feel more smooth when waiting for the DevTool to open. But it's by no means essential. |
https://github.com/sindresorhus/devtools-detect Seems pretty stable and easy to use |
The current solution works fine and detects when I open the devtools but I confirm that it continues in the background (but I cannot say why because of my limited understanding of its implementation with a promise...) I've also found the devtools-detect that you mentioned @J12934, but I find its implementation to be more unreliable because it relies on checking the dimension of the display: const widthThreshold = window.outerWidth - window.innerWidth > threshold;
const heightThreshold = window.outerHeight - window.innerHeight > threshold; It also doesn't work if the devtools are opened in a second window... |
Mh took another look, It possible to really improve the performance costs by running |
I re-checked and indeed I confused Firefox and Chrome (was using both at the moment...). And I agree with you @J12934:
I tried to add |
This issue has been automatically marked as |
Did we update this? |
Yeah, me neither, but I wasn't entirely sure if your conclusion was to change anything or just leave it as it is... 馃榿 |
I think the co conclusion was that we can add a console.clear call to fix the performance problems on both chrome and Firefox, but the detection will still only work in chrome. Only downside would be that this would clear all console history of the current tab. This should not really be an issue in my view. |
Same conclusion here :) |
This thread has been automatically locked because it has not had recent activity after it was closed. 馃敀 Please open a new issue for regressions or related bugs. |
馃悰 Bug report
Description
When doing a challenge with Hacking Instructor which checks for the opening of the devtools (e.g. "view basket" challenge) I noticed that the devtools console was going crazy in a loop as my CPU 馃く
I understand that this comes from the code that waits for devtools:
https://github.com/bkimminich/juice-shop/blob/d29573a5d88209ecbe482b2b2140ded6f17d6b5b/frontend/src/hacking-instructor/helpers/helpers.ts#L128-L131
And this potential issue was mentioned: https://stackoverflow.com/questions/7798748/find-out-whether-chrome-console-is-open/48287643#comment110980766_48287643 馃
Moreover, this never stops even after completing the challenge! We have to refresh the page to stop the loop.
Is this a regression?
No
馃敩 Minimal Reproduction
馃敟 Exception or Error
N/A
馃尦 Your Environment
N/A
Running latest code from develop branch as of now
Additional Information
Some suggestions:
The text was updated successfully, but these errors were encountered: