hashirama/goldendict-ng
hashirama/goldendict-ng
0
0
Fork 0
mirror of https://github.com/xiaoyifang/goldendict-ng.git synced 2024-11-27 15:24:05 +00:00
Code Issues Actions 1 Projects Releases Wiki Activity

Update how to debug dictionary js.md

Browse source
This commit is contained in:
xiaoyifang 2023-08-30 16:19:24 +08:00 committed by GitHub
parent 3fbeff1ffa
commit a801c4cb09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
website/docs/howto/how to debug dictionary js.md
View file

@ -1,27 +1,29 @@
# background # How to debug dictionary javascript
## background
When some js functions do not work as expected, this article tries to give a debug solution to pinpoint the problem. When some js functions do not work as expected, this article tries to give a debug solution to pinpoint the problem.
# goldendict-ng inspector ## goldendict-ng inspector
Goldendict-ng has embedded an inspector, you can trigger it manually using `F12`. Goldendict-ng has embedded an inspector, you can trigger it manually using `F12`.
Screenshot: Screenshot:
![Inspector](../img/inspector.png) ![Inspector](../img/inspector.png)
# How to navigate to the specified element ## How to navigate to the specified element
Click the find element and move mouse to the specified element, click the element will navigate the source panel to the very place. Click the find element and move mouse to the specified element, click the element will navigate the source panel to the very place.
![steps](../img/inspector-steps.png) ![steps](../img/inspector-steps.png)
# Modify the css style ## Modify the css style
you can play around with the css to modify the appearance of the html and check the results. you can play around with the css to modify the appearance of the html and check the results.
![style](../img/inspector-style.png) ![style](../img/inspector-style.png)
# check javascript events ## check javascript events
- navigate to the specified element - navigate to the specified element
- check eventlisterner panel - check eventlisterner panel
@ -36,7 +38,7 @@ If some desired event does not triggered , it can first check does the event lis
![breakpoint](../img/inspector-breakpoint.png) ![breakpoint](../img/inspector-breakpoint.png)
# reproduce the issue in the goldendit ## reproduce the issue in the goldendit
following your normal operations and debugging the javascript code and pay attention to the console output. Whether any errors happened. following your normal operations and debugging the javascript code and pay attention to the console output. Whether any errors happened.
![Alt text](../img/inspector-console.png) ![Alt text](../img/inspector-console.png)