How to debug HZ+ (Chrome tutorial)

[GrosPoulet]

HZ+ debug mode is disabled by default, that's why we get very few informations written to Chrome console when extension is running.
So the first step should be to enable debug mode to have a better understanding of what's going on.
Since debug flag is hard-coded in extension's javascript, we'll have to:

1. modify the code (any text editor will do),
2. reload the modified extension into Chrome.

Steps:

• open Extensions settings

• activate Developer mode then open HZ+ Details page

• find extension ID (pccckmaobkjjboncdfnnofkonhgpceea)

• open extension's folder, it should be here: C:\Users\USER_NAME\AppData\Local\Google\Chrome\User Data\Default\Extensions\pccckmaobkjjboncdfnnofkonhgpceea\1.0.173_0

• copy 1.0.173_0 folder to another location (outside of Chrome's folders), this will be our private copy for debug & tests

• open HZ+ main script: \1.0.173_0\js\hoverzoom.js

• since source code is not minified, debug flag is easy to locate and modify:
  line 2: change debug = false to: debug = true

• save file, now we have to load this modified version of HZ+ into Chrome

• go back to Chrome Extensions settings and click "Load unpacked"

• select 1.0.173_0 folder, Chrome will take a few seconds to load the modified extension

• we can see that the official version of HZ+ (= the one downloaded from Chrome Web Store) has been replaced by our version. Do not worry for Errors. If we check extension's Detail we can see that extension is stored in the location we selected.

• now when we load a page and hit F12, we can see debug information displayed in console. We can also see updated source code.

That's all, we can now modify our debug version at will (do not forget to reload it after each change) and debug it.
Once we're done we can remove it ("Remove" button, as with an official extension).

[extesy]

Excellent tutorial, @GrosPoulet!