This is the 14th day of my participation in Gwen Challenge

Hi, I’m Daotin, front end team leader. If you want to get more front end highlights, follow me and unlock new front end growth poses.

The following text:

Any web developer for the protection of their own pages, do not want their front-end code stolen or copied by others. Although we are busy writing bugs into the code, we still prevent others from coveting your code.

Thus, the need for front-end reverse debugging arises.

In the usual project development, there are about the following common front-end debugging techniques:

Unlimited debugger reverse debugging

The code is very simple, just one line, the function is to let the user open the developer tool, the front page directly into the Debugger interface, prevent the user from further operations, so that the user can not carry out regular operations in the interface, also can not know the execution logic of the program.

(Click image to enlarge)

Matters needing attention:

1. Always use anonymous functions. Function startDebug() {}; function startDebug() {};

2. Be sure to write on one line. Otherwise, someone can disable the debugger by setting a conditional breakpoint false.

The code is simple, but effective.

It will keep interrupting you, jumping to the source page, preventing you from seeing its code keep generating non-recyclable objects, taking up your memory, causing a memory leak, and the browser will freeze up after a while.

Disadvantages: You can disable the Debugger by disabling the browser Deactivate breakpoints, but there is a major drawback, since we still need breakpoint debugging for other code. So this method is limited to static analysis.

2. Disable F12 and other buttons

Block F12 via JavaScript, right mouse button, etc.

Nothing more to say, go straight to the code (click image to enlarge).

The difference between return False, event.preventDefault() and event.stopPropagation()?

  • event.preventDefault(); Block browser default behavior

  • Event.stoppropagation () : Prevents event bubbles

  • return false:

    • In jQuery, equal to the sum of the first two.

    • In non-jquery, equal to event.preventDefault(); , does not prevent the event from bubbling.

Event-preventdefault-vs-return-false

Disable F12 and other keys and debugger

After the second step, disable F12 and other keys, although you cannot use the shortcut keys to enter the debugging tool, you can still open the debugging interface by clicking “Settings” in the upper right corner of the browser, entering “More Tools”, and then opening “Developer Tools”.

Then we need to open the Debugger after he enters developer Tools, so we optimize it based on step 2.

Go directly to the code (click the image to enlarge) :

Added a piece of anti-debugging code, if the console is still open, infinite debugger, and the page becomes extremely stuttering.

Reference links:

  • App.yinxiang.com/fx/f30b911e…
  • Segmentfault.com/a/119000001…

So our front-end reverse debugging is complete, can prevent some basic white users, but can not prevent the real god.

So, “reverse debugging” also appeared, is really a post higher than the devil.

Check out this article: Front-end Chrome anti-debugger

(after)

Recent hot articles:

  • Waterfall flow, it’s so easy
  • Four common ajax cross-domain solutions (easy to understand)
  • Vue. Js Naming Style Guide (Easy to remember Version)

Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin