Question:
Obtenez les plugins jQuery utilisés sur le site Web
user187
2013-03-20 23:51:19 UTC
view on stackexchange narkive permalink

Je veux savoir quels plugins jQuery Facebook utilise pour leur barre de défilement spéciale, comme les deux sur la gauche, pas la normale sur la droite:

enter image description here

( source)

En général, comment dois-je procéder lorsque je veux savoir quel plugin jQuery [site Web X] utilise pour [comportement Y]?

Je sais que cela [a été demandé sur SO] (http://stackoverflow.com/q/7125185/1544337), mais les réponses ne fournissent pas d'idées de base pour le reverse engineering de javascript.
Trois réponses:
#1
+8
jg0
2013-03-21 21:23:39 UTC
view on stackexchange narkive permalink

Firefox et Chrome disposent tous deux d'outils de débogage utiles pour vous aider à trouver plus d'informations sur les scripts liés à un comportement. J'expliquerai principalement dans Chrome car leurs outils de débogage par défaut sont plus étendus

Pour commencer, vous pouvez généralement utiliser Right Click->Inspect Element pour obtenir des informations sur un élément rapidement. Cependant, cela ne semble pas fonctionner sur le ticker de Facebook - cela sélectionnera le "Ticker News" derrière la barre de défilement comme ceci:

inspect fail

Parce que nous ne pouvons pas voir l'élément en cours modifié, nous devrons faire quelques suppositions. Les histoires de ticker elles-mêmes ne semblent pas avoir quoi que ce soit lié aux barres de défilement. Après avoir voyagé vers le parent et plié <div class = "tickerActivityStories" > , nous pouvons commencer à voir les choses clairement

En survolant (et en invoquant le code "apparaître" des barres de défilement) nous pouvons observer le DOM de la page et noter les différences.

comparison

Il semble donc que <div class = "uiScrollableAreaTrack" > car il répond en conséquence chaque fois que la souris entre / sort. Le nom a également un sens (implique que ce sont les pistes de la barre de défilement). En dépliant ce div , nous remarquerons qu'il y a même un "préhenseur" pour la barre de défilement!

gripper

Pour savoir ce que Javascript est impliqué dans les barres de défilement, cliquez sur <div class = "uiScrollableAreaGripper" , et dans le volet de droite, dépliez l'onglet Event Listeners . Nous pouvons supposer qu'il répond au focus, et dans la section Focus , vous remarquerez quelques références à des fichiers Javascript. Survolez les noms de fichiers et Chrome vous montrera le lien des fichiers Javascript.

listeners

Si vous avez de la chance, les fichiers peuvent avoir un nom reconnaissable (tel que typeahead.min.js ou similaire, que vous pouvez rechercher sur Google). Malheureusement, dans la plupart des cas, y compris le nôtre, nous recherchons probablement du code propriétaire ou du code minifié. (Le code réduit est extrêmement courant pour réduire la taille des fichiers afin que les pages se chargent plus rapidement)

#2
+2
txwikinger
2013-03-21 18:29:36 UTC
view on stackexchange narkive permalink

Vous pouvez utiliser un profileur et un outil de débogage dans votre navigateur pour examiner le site Web. Les navigateurs Webkit (comme Google Chrome) sont intégrés. Firefox a un bon plugin appelé firebug.

Avec le profileur, vous pouvez voir quelles fonctions sont appelées à quelle fréquence, ce qui peut vous donner une idée de l'endroit où chercher. Ensuite, avec le débogueur, vous pouvez définir des points d'arrêt dans le code javascript pour affiner l'emplacement exact

#3
  0
Nicolás Kuglien
2017-01-27 01:51:13 UTC
view on stackexchange narkive permalink

J'ai utilisé https://noraesae.github.io/perfect-scrollbar/ qui est très similaire et facile à utiliser



Ce Q&R a été automatiquement traduit de la langue anglaise.Le contenu original est disponible sur stackexchange, que nous remercions pour la licence cc by-sa 3.0 sous laquelle il est distribué.
Loading...