Skip to content
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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made the DevTools to detect for mobile mode #46

Closed
wants to merge 14 commits into from
Closed

Made the DevTools to detect for mobile mode #46

wants to merge 14 commits into from

Conversation

marvlyngkhoi
Copy link

@marvlyngkhoi marvlyngkhoi commented Feb 21, 2021

Made to detect when dev tools is opened in mobiles mode and table/ipad

Fixes #35

For iphone

screenshot1
scrennshot2

For Android

screenshot3
screenshot4
Browser used: Firefox


IssueHunt Summary

Referenced issues

This pull request has been submitted to:


@sindresorhus
Copy link
Owner

Can you please explain your changes?

@sindresorhus
Copy link
Owner

You also need to ensure the linting passes.

@marvlyngkhoi
Copy link
Author

@sindresorhus do you mean I have to edit the code to pass the check.

@marvlyngkhoi
Copy link
Author

marvlyngkhoi commented Feb 22, 2021

Can you please explain your changes?

As for the changes since when opening in responsive mode(for phones/tablets and even in higher screen sizes) the inner and outer width or inner height remains the same even wen developer console Is open. So I just wrote a function to check if the user agent is a phone and created another function to execute console.log and get the performance difference before and after it finish to execute console.log and the value will vary depending on whether developers console is open or not. And I used this value to determine whether if the console is open or not.

index.js Outdated Show resolved Hide resolved
Co-authored-by: Pedro Augusto de Paula Barbosa <[email protected]>
// Check how long its takes for the given code to execute
// It return a value after execution
// If value is greater than 60 then dev tool is open
// If value is less than 60 then dev tool is not open
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sounds very fragile. Is this really reliable enough? The performance difference between devices can be huge. For example, maybe the new M1 Macbook's manage to do this in less than 60 even when DevTools is open.

!(heightThreshold && widthThreshold) &&
((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)
) {
if (!(heightThreshold && widthThreshold) && ((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't do unrelated changes.

}

devtools.isOpen = true;
devtools.orientation = '';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?

if ((!devtools.isOpen || devtools.orientation !== orientation) && emitEvents) {
emitEvent(true, orientation);
}

devtools.isOpen = true;
devtools.orientation = orientation;
} else if (isPhone()) {
if (parseInt(checkPerformance(), 0) > 60) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0 => 10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DevTools not detecting then mobile mode enabled
3 participants